Question

我在我的js文件中给出了如下图像的路径：“ /images/mussels.jpg”，并在react应用程序的组件中导入了文件。在localhost / 3000中，一切看起来都很好，但是当我在网络上上传应用程序时，图像路径不正确，并且图像未显示在网络上。另外，当我在控制台中签入时，样式属性为空。但我在[请在此处输入图像说明] [1] y css文件中给出样式。

这是我的SampleFishes.js文件，其数据如下：

const sampleFishes = {
  fish1: {
    name: "Pacific Halibut",
    image: "/images/hali.jpg",
    desc: "Everyones favorite white fish. We will cut it to the 
    size you need and ship it.",
    price: 1724,
    status: "available"
  }

导出默认的SampleFishes；

然后在“鱼”组件中：图片是通过this.props导入的，如下所示：

<img
      src={this.props.details.image}
      alt={this.props.details.name}
      className="img"
    />

通过App.js发送的

和Samplefishes像这样导入：

从“ ../SampleFishes”导入sampleFishes；和

{Object.keys(this.state.fishes).map(key => (
          <Fish
            key={key}
            details={this.state.fishes[key]}
            ordkey={key}
            addToOrder={this.addToOrder}
          />
        ))}

在console.log中，HTML元素显示如下图像路径：

<img src="/images/hali.jpg" alt="Pacific Halibut" class="img" style="">

但是未显示网络上的图像。我已经在css文件中将样式指定为.img className作为

 .menu-fish .img { float: left;  width: 150px; margin-right: 1rem; }

Answer 1

这里的一个猜测是，当您将应用程序部署到服务器时，必须将图像路径更改为“ ./images/mussels.jpg”。这是我对我们在此处获得的小信息的最佳猜测=）

Answer 2

我知道了。在build文件夹中，有index.html文件，该文件具有css的路径，例如href =“ / Shop-Fish / static / css / main.4b89f08f.chunk.css” 因此，这意味着图像的路径与src =“ / Shop-Fish / images / prawns.jpg”相同，在本地主机情况下仅为src =“ / images / prawns.jpg”，但当它是为github构建时gh-pages，它在所有引用中都附加了回购名称，图像首先也需要相同的回购名称ref，然后才是图像路径。谢谢所有尝试解决我的查询的人。

Webpack构建后图像路径错误

2 个答案: