Добавление фонового изображения для div в React?

Question

render(){
        const { classes } = this.props;
        const { imageDescription } = this.props.imgDesc;
        const { currentIndex } = this.state;

        var fullPath = `../images/Large/${(imageDescription[currentIndex]).imagePath}.jpg`;
        console.log("Fullpath: "+fullPath);

        return (
            <div style={{ 'background-image': "url(" + require(fullPath) + ")" }}>
            </div>

У меня есть компонент, который возвращает div с фоновым изображением, но при запуске он показывает ошибку, Не удается найти модуль '../images/Large/homeTecno.jpg'. Но когда я изменяю переменную fullPath в require с выводом оператора console.log, это работает?

Answer 1

Это потому, что require используется только для импорта объектов javascript (классов, объектов, функций, ...), но не изображений. При настройке фонового изображения ожидается только строка, а не объект. Вот почему ваше второе решение работает.

Обратите внимание, что вы также можете определять свойства стиля с помощью объекта со свойствами, записанными в camelCase.

Учитывая, что ваше изображение доступно через yourdomain.com/images/Large/{...}.jpg. Вы должны хорошо делать

const path = (imageDescription[currentIndex]).imagePath;
const fullPath = `url(/images/Large/${path}.jpg)`;
return (
    <div style={{ backgroundImage: fullPath }} />
);

Или немного быстрее

const path = (imageDescription[currentIndex]).imagePath;
const backgroundImage = `url(/images/Large/${path}.jpg)`;
return (
    <div style={{ backgroundImage }} />
);

Что работает, потому что запись объекта как { object } эквивалентна записи { object: object }