图像的相对路径在反应应用中不起作用？

Question

我创建了一个js文件，其中一个数组包含多个对象。每个对象都有一个给定的图像路径。使用for循环，我将每个对象导入到我的组件。除了图像，一切正常。它坏了。它没有走相对路径。我已将所有图像存储在一个文件夹中。以下是我的代码：

Data.js

export const dashboardUtil = [
     {
       title: "Posts",
       count: 500,
       image: "/src/images/1.png"
     }
   //rest of the objects
]

Component.js

let blocks = [];

for(let i=0;i<dashboardUtil.length;i++){
    blocks.push(
            <Col xs={12} md={6} sm={6}>
              <div className="main-block" className="stats-block">
                <h3>{dashboardUtil[i].title}</h3>
                <p>{dashboardUtil[i].count}</p>
                <img src={dashboardUtil[i].image} />
              </div>
            </Col>
          );
}

Answer 1

image: "/src/images/1.png"

这不是相对路径，它是绝对的（以斜线开头）。如果你想要它是相对的，请使用./，例如./src/images/1.png。

更大的问题是，您正在为用户浏览器的上下文提供本地资源的路径。它希望这是一个http(s)://资源。您需要提供Web服务器处理的端点并提供资源。

或者：

• 您的图像需要进入Web服务器可以访问的位置，您需要设置img src属性以引用该位置
• 您应该查看webpack和文件加载器插件，该插件通过require()获取本地图像路径，并将其复制到可访问的位置。