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"
}]

反应中的动态图像路径

1 个答案: