Компонент класса с невидимым фоновым свойством

У меня есть компонент класса Tile вот его код, он в отдельном JSX файле:

import React from 'react';

export default class Tile extends React.Component {
    render() {
        return (
            <div
                style={{
                    width:"16px",
                    height:"16px",
                    background: `url('${this.props.tiles}') no-repeat
                ${+this.props.x * -16} ${+this.props.y * -16}`
                }}
                className={`tile${this.props.aClass ? ' ' + this.props.aClass : ''}`}
            ></div>
        );
    }
}

Вот app.jsx:

import React from 'react';
import Tile from './components/tile.jsx';

function App() {
    return (
        <div className="App">
            <Tile tiles="./assets/Tilemap/tiles_packed.png" x="0" y="0" />
        </div>
    );
}

export default App;

Tile отображается, но невидим, почему?

кавычки здесь не требуются от URL('${this.props.tiles}')... до `url(${this.props.tiles})....

Codenewbie 23.04.2022 08:31

все еще не появляется

5alidshammout 24.04.2022 05:56

похоже проблема в пути, посмотри i.stack.imgur.com/r3RWp.png

5alidshammout 24.04.2022 06:01

Таким образом, изображение находится не по указанному пути, проверьте точный путь и попробуйте

Codenewbie 24.04.2022 06:37

расширение предварительного просмотра изображений vscode не показывает ожидаемое изображение, я думаю, проблема в компиляторе

5alidshammout 24.04.2022 06:39

что-нибудь в консоли браузера? ошибка или что-то полезное ??

Codenewbie 24.04.2022 06:41

ни одна консоль не пуста

5alidshammout 24.04.2022 06:42

Давайте продолжить обсуждение в чате.

5alidshammout 24.04.2022 06:43
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
1
8
38
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Пара вещей, на которые стоит обратить внимание после просмотра вашего кода

  • Импортируйте изображение, так как его нет в общей папке для обслуживания.
  • Файлы манифеста содержат некоторые вещи, связанные с .png, которые необходимо удалить из-за ошибки в консоли в соответствии с этим Q - Подробнее здесь
  • Не передавайте путь к файлу из компонентов, которые не находятся в одной иерархии папок - почему? Просто путь меняется, а ресурс не загружается, что очевидно...

Измените части кода следующим образом:

Приложение.tsx:

import React from 'react';
import Tile from './components/tile.jsx';
import tiles_packed from "./assets/Tilemap/tiles_packed.png" // this get's the image and pass it any where you want

function App() {
    
    return (
        <div className="App">
            <Tile tiles= {tiles_packed} x="0" y="0" />
        </div>
    );
}

export default App;

плитка.jsx

import React from 'react';

export default class Tile extends React.Component {
    render() {
        return (
            <div
                style={{
                    "minWidth": '16px', // change styles to view image 
                    "minHeight": '16px',
                    background: `url(${this.props.tiles}) no-repeat
                ${+this.props.x * -16} ${+this.props.y * -16}`,
                }}
                className={`tile${this.props.aClass ? ' ' + this.props.aClass : ''}`}
            ></div>
        );
    }
}

чтобы быть уверенным, импорт изображения, как вы сделали в app.jsx, возвращает URL-адрес данных, верно?

5alidshammout 27.04.2022 07:17

Для этого просто войдите и проверьте ....

Codenewbie 28.04.2022 07:19

это так, но я думал, что это URL-адрес данных, потому что у меня была ошибка или опечатка

5alidshammout 28.04.2022 07:22

потому что, когда я использовал посылку, она возвращала отредактированный URL-адрес

5alidshammout 28.04.2022 07:23

Хорошо, понял

Codenewbie 28.04.2022 07:27

Другие вопросы по теме