如何动态导入图像以在反应中设置为背景图像属性的url路径

Question

我有一个资产文件夹，用于存储我所有的图像。
在资产文件夹中，我还有一个 json 文件，其中包含对象，每个对象都有一个保存图像相对路径的键。

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

我希望能够通过 json 文件中的这些对象进行映射，并动态创建一个具有 div 的组件，其中其背景图像属性将是url() 和路径参数将通过每个 json 对象提供。
像这样：

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

如果我像这样在顶部专门导入图像路径，它就可以工作

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

但那样的话它就不是动态的了。

如何动态导入导入图像以设置为背景图像属性的 url 路径？

Answer 1

如果你有一个映射所有图像的对象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}
    />
  )
}

Answer 2

答案灵感来自@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;

如何动态导入图像以在反应中设置为背景图像属性的url路径

How to import images dynamically to set as the url path for background image property in react

url

import

background-image

reactjs

webpack