javascript - React中的动态图像路径

Question

在我的 React 项目(使用 create-react-app 制作)中，我有一个具有以下格式的对象数组:

items : [{
    id:"test",
    title:"Test title",
    project_url:"/project/test",
    doc:"2018",
    description:"test description",
    link:"example.com",
    background_img:"../../../s.png",
    color:"#333333"
}]

我将这些对象映射到要在页面上显示的元素:

_generateItems() {
    return this.state.items.map((item) => {
        return (
            <div className="item">
            <h3>{item.title}</h3>
            <div className="device" style={{backgroundImage:`url(${item.background_img})`}}/>
            <Link to={item.project_url}><div className="info_btn"><h6>More info</h6></div></Link>
            </div>
        )
    })
}

我的问题是我无法让内部 div 的背景图像正常工作。在互联网上搜索后，我尝试使用模板文字，如下所示:

`url(${item.background_img})`

这使得项目能够正确编译和运行，并且在浏览器中检查 div ，我可以看到它具有正确的样式。但是该图像不会出现在 div 上。

我猜测这与 webpack 在构建项目时处理图像等静态资源的方式有关。我怎样才能让它发挥作用？

Answer 1

您的图像是静态提供的吗？如果是这样，您的项目根目录中应该有一个 Public 文件夹(请参阅您已使用 create-react-app 来设置您的项目)。

将您的图像(即s.png)放置在项目的Public目录中，然后修改代码如下:

items : [{
    id:"test",
    title:"Test title",
    project_url:"/project/test",
    doc:"2018",
    description:"test description",
    link:"example.com",
    background_img:"/s.png", // Update the image path  
    color:"#333333"
}]