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服务器处理并提供资源的端点。

或者：

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

在反应应用程序中无效的图像的相对路径？

1 个答案: