加载资源失败：将my react应用程序上载到github页面时，服务器以404（）的状态响应

Question

我创建了一个简单的反应项目，然后执行命令npm运行构建。然后，上传到github页面这里https://mirzhal95.github.io/customTemplate/但面临无法加载资源：服务器以404（）的状态响应。所以，我参考了这样的图像

const store = [

        {
          name: "outside",
          color: "lightpink",
          position: [-400, 0, 300],
          url: "src/assets/picture1.jpg",
          link: 1,
        },
    
        {
          name: "inside",
          color: "lightblue",
          position: [-100, 0, 900],
          url: "src/assets/picture5.jpg",
          link: 2,
        },
        {
          name: "Hall",
          color: "red",
          position: [20, 10, 0],
          url: "src/assets/picture3.jpg",
          link: 1,
        },
      ];

我应该如何引用jpg图像，这样我在部署时就不会有问题。

Answer 1

如果从dist/文件夹进行部署，则需要将图像放在其中。目前他们不是，所以你可能会想玩你的webpack配置。您要么只需要汇总整个资产目录，要么需要通过打字稿导入这些图像。否则webpack不知道那些字符串你有参考实际文件。

测试最简单的方法是使这些链接相对于dist文件夹，如下所示：

url: "src/assets/picture3.jpg"

会变成：

url: "/assets/picture3.jpg"

然后您可以将asserts文件夹复制到dist/您自己。