新的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>

区别在于";"前/src/……"对于img属性"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-know-how-to-resolve-properly-or-troubleshoot/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}
[...] />

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

希望这有助于任何可能需要它的人!