图片未加载但路径正确答案

【问题标题】：Images not loading but path is correct图片未加载但路径正确
【发布时间】：2018-03-26 05:38:34
【问题描述】：

下面是我现在的文件结构。

我在 Move.jsx 文件中，我有这行代码：

<img src="../images/attack.png" />

在本地运行，我相信这应该可以工作并显示图像，但是当页面加载时没有显示图像，而是显示损坏的图像符号。

chrome控制台输出有这个错误

GET http://localhost:4000/images/attack.png 404 (Not Found)

【问题讨论】：

您向我们展示了源文件的目录结构，而不是生成的包的目录结构。重要的是 _build 文件夹里面有什么。
@Sulthan 我从未查看过_build 文件夹。你能给我一些关于在那里做什么的指示吗？
.. 是相对于基本 URL 执行的。服务器不知道文件夹。可以看到最终的URL是http://localhost:4000/images/attack.png，大概意思是_build/images/attack.png。您应该确保正确复制资产以进行构建。
你应该有像 Webpack 这样的东西来打包你的所有文件。您实际上可以使用 Webpack 通过使用 ES6 导入语法来加载图像，或者让 Webpack / Gulp 将图像转储到 @Sulthan 提到的 build 文件夹内的 img 文件夹中
@Sulthan 我不知道我必须将图像复制到 _build 文件夹中。我不知道我应该触摸 _build 文件夹。这是正常的做法吗？

【解决方案1】：

您将要使用static_path/2 辅助函数。你应该可以使用

<img src="<$= static_path(@conn, "/images/attack.png") %>" />

你可以看看templates/layout/app.html.eex，你的css和javascript文件应该有类似的东西。

【讨论】：

【解决方案2】：

结果我不得不手动将我的图像从 /static/images 复制到 /priv/static/images ，因为某种原因它没有自动为我复制它。

感谢大家的帮助！

【讨论】：