Как динамически импортировать изображения для установки в качестве URL-адреса для свойства фонового изображения в React - PullRequest
Новая
       58

Как динамически импортировать изображения для установки в качестве URL-адреса для свойства фонового изображения в React

0 голосов
/ 17 июня 2020

У меня есть папка ресурсов, в которой хранятся все мои изображения.
И в папке ресурсов у меня также есть файл json, в котором есть объекты, у каждого из которых есть ключ, содержащий относительный путь к изображению. 

[
  {"url":"../assets/image1"},
  {"url":"../assets/image1"}
]

Я хочу иметь возможность отображать эти объекты в файле json и динамически создавать компонент, который будет иметь div, где его свойство background-image будет url () и аргумент пути будет передаваться через каждый объект json.
вот так: 

function Box(props) {
  const style = {
    backgroundImage: `url(${props.imageURL})`
  }
  return(<div style={style}></div>)
}

Он работает, если я специально импортирую путь к изображению, как это, вверху 

import imageURL from '../assets/image1';
...
    backgroundImage: `url(${imageURL})`
...

Но тогда это не будет динамическим c.

Как мне динамически импортировать импортируемые изображения, чтобы установить их в качестве URL-адреса для свойства background-image?

Ответы [ 2 ]

0 голосов
/ 19 июня 2020

Ответ, вдохновленный @chonnychu
В итоге я создал компонент, который обрабатывает весь импорт, и в конце экспортировал все импортированные материалы.
Хотя это не оптимальное решение, но это приемлемый объем ручной работы. 

import box1image from "../assets/TimeSeriesAnalysis.png";

const boxInfo = [
  {
    id: 1,
    image: box1image,
    title: "Box 1",
    description:
      "Box 1 is the first box",
  },
];

export default boxInfo;
0 голосов
/ 18 июня 2020

если у вас есть объект для сопоставления URL всех изображений, возможно, вы сможете сделать это так?

ваш файл карты 

import bg from './bg.jpg';
import bg1 from './bg1.jpg';

export default {
  bg,
  bg1,
  ...
}

ваш компонент 

import imageMap from '../assets/imageMap';

function Box() {
  const [imageUrl, setImageUrl] = React.useState(imageMap.bg);

  React.useEffect(() => {
    /* you can change image url by effects dynamically */
  }, [])

  /* you can change image url by events dynamically too */
  const handleClick = () => {
    setImageUrl(imageMap.bg1);
  }

  return (
    <div
      style={{
        backgroundImage: `url(${imageUrl})`
      }}
      onClick={handleClick}
    />
  )
}
...