刚接触 netlify 错误，在 React 项目中加载图像，不知道如何正确解决或排除故障

Question

我是 netlify 和部署 web 应用程序的新手，所以如果这是一个简单的问题，我很抱歉，但我似乎找不到任何合适的方法来解决这个问题，因为我知道如何诊断这些东西，但我不确定从哪里开始。

当我加载网站时，我的资源出现了一堆 404 错误。但是，所有资产都存在于项目的 GitHub 存储库中并已更新，并且该站点在本地主机上运行良好。我不确定是什么问题，但我怀疑它可能与文件路径有关？

我已经使用 ./src/... 建立了我的网站，我认为这可能是一个问题，但在尝试删除某些图像上的那些之后，它们仍然没有加载。所以我尝试直接链接，但是实际直接加载的唯一图像是远程托管的图像。

我也试过询问聊天 gpt，并将实时源更改为远程图像。 gpt 没有多大帮助，将源更改为远程图像确实有效，但我宁愿能够从内部链接到外部。

我尝试过的一个例子正在改变：

<div id="logo">
        <img
          src="./src/assets/mediaKits/reineYurkowskiAssets/initialsThicc.svg"
          alt="Reine Yurkowski's signature"
          style={{ transform: "scaleX(1.5) skew(10deg, 10deg)" }}
        />
</div>

<div id="logo">
        <img
          src="/src/assets/mediaKits/reineYurkowskiAssets/initialsThicc.svg"
          alt="Reine Yurkowski's signature"
          style={{ transform: "scaleX(1.5) skew(10deg, 10deg)" }}
        />
</div>

不同之处在于“。”在 img 属性“src”的“/src/...”之前

如有任何关于如何解决此问题的建议，我们将不胜感激。

项目托管@：https://rydesigns-dev.netlify.app/ github 托管于@：https://github.com/reineyurkowski/rydesigns.ca

最后，我正在构建的错误示例是：

GEThttps://rydesigns-dev.netlify.app/src/assets/roundedSquare.svg[HTTP/2 404 Not Found 30ms]

Answer 1

我找到了解决方案，多亏了一个面包屑：https://answers.netlify.com/t/new-to-netlify-errors-loading-a-images-in-a-react-project-don-t -知道如何正确解决或排除故障/89124

我发现最好的解决方案是创建一个名为 assets.tsx 的文件（或您正在使用的任何文件系统），然后将资产导入到如下结构中：

import desiredNameOfAsset from './link/to/asset'

const assets = {
  desiredNameOfAsset
}

export default assets;

然后在页面顶部附近的任何文件中需要调用所述资产：

import assets from './link/to/assets.tsx'

之后，只需将资产称为：

<img [...]
  src={assets.desiredNameOfAsset}
[...] />

然后在构建时，它会处理所有需要的细节。

希望这可以帮助任何可能需要它的人！