为什么我的 html 图片 src 搜索的是 url 而不是我的目录？答案

【问题标题】：Why is my html image scr searching into the url instead of my directory?为什么我的 html 图片 src 搜索的是 url 而不是我的目录？
【发布时间】：2021-08-29 09:48:52
【问题描述】：

我有一个 html 文件，我想在其中显示一个名为 plot.png 的图像，其中包含 <img src="plot.png" alt="Stock price vs. predictions graph"> 行。在我的网站上，我只看到替代文字，这意味着我的图像没有正确加载。在我的命令提示符输出中，我看到我有一个对 /mysite/home/AAPL/plot.png 的获取请求，这非常令人沮丧，因为这意味着当我搜索图像时，此代码只是将它放在 url 中（其中是本地主机../mysite/home/AAPL）。我尝试将 plot.png 放在与我的 html 文件相同的工作目录中，并尝试使用 C: 开头的 plot.png 的绝对路径，但似乎没有任何东西可以从 url 中搜索出来。请帮忙，谢谢！

如果有帮助，我正在使用 Django

【问题讨论】：

您正在从本地主机查看此页面，这意味着它在本地计算机上的服务器实例上运行，因此在本地主机的上下文中评估 /path/to/my/file，例如 localhost/path/to/my/file，而不是您的本地文件系统，就像您通过 file:// 协议加载 html 文件一样。请记住，相对 URL 是根据当前页面的 URL 评估的（因此称为“相对”术语），因此根据您的目录结构，“plot.png”可能不会（并且显然不是）指向您认为的内容。
打开浏览器的开发者工具并检查网络标签是否有错误。
@David 我已经尝试了这个 src="file:///C:/Users/Mason%20Choi/PycharmProjects/market_predict/plot.png" 通过将我的图像放在浏览器中并复制该图像地址但它似乎也不起作用。您能否详细说明如何将我的 url 指向我的本地文件系统，而不是使用这个 file:// 的 localhost url？

标签： html image directory

【解决方案1】：

你可以把图片放在同一个工作目录（和你的html文件在同一个文件夹里），然后使用

<img src="./plot.png" alt="Stock price vs. predictions graph">

“./”很重要，因为它表示图像在当前文件夹中。

您还可以使用www.linkpicture.com 之类的网站生成一个链接来托管您的图片，然后在您的 img 中使用该链接

【讨论】：

./plot.png 与plot.png 相同
嗨，我不能把我的图像放在同一个工作目录，因为我想自动下载图像，但是我下载的源只允许我下载到某个目录，实际上是上面的 2 个父母html文件。我如何将 url 指向这个目录而不是 url，谢谢！

【解决方案2】：

某些网络浏览器会自动禁止加载图像。解决这个问题就像从浏览器的设置菜单中选择“显示所有图像”一样简单。检查您使用的设备是否具有可能阻止图像的安全软件或扩展程序也是值得的。同样，您可以将此标签用于 .png 类型的照片

<img src="exampel.end">

//使用扩展类型.end而不是.png

【讨论】：

【解决方案3】：

我忘了提到我使用的是 Django 框架，并且 html 模板的工作方式与常规 html 文件的工作方式大不相同。在 Django 中，您必须将图像放在静态文件夹中，然后使用 Jinja 调用 if，如下所示：<img src="{% static 'mysite/image.PNG' %}">

【讨论】：