HTML <img src>加载不了我的图片。

Question

我对这个问题感到困惑，我正在使用jQuery创建我的网站的移动版，但是我的图片在img src标签中拒绝加载。

<img src="images/me.jpg" width="200" height="267" alt="me">

我尝试使用标签从我的网站直接加载图片，但它们拒绝加载，并将图片移动到与网页相同的目录中，但仍然无法加载。我只能看到一个大小与宽度和高度相同的框，里面有alt文本和一个图片图标。

我真的不明白出了什么问题。

提前感谢您的帮助。

- Hopeless

---

你确定 me.jpg 图片在 images 目录中，并且 Web 服务器有权限访问该目录并配置为从其中提供图像吗？ - Oded

如果您尝试从错误的目录加载文件，则应该会收到“404未找到”错误，或者如果您的应用程序没有权限访问该目录，则会收到“403未经授权”的错误。请检查您的控制台以获取错误信息。 - Artyom Neustroev

好的，我从我的完整网站下载了源文件，在那里一切都正常。在本地运行网站时出现了同样的问题，这个网页实际上只是HTML和CSS。 - Hopeless

你可以尝试以下两种方法： 1：在src中输入图像的完整路径。 2：将图像保存下来，用Photoshop打开并重新保存为JPG格式，然后再尝试。 - Syed Sajid

感谢您的帮助，我找到了问题所在。我的图片存在问题，无法在Photoshop、Paint或其他任何软件中打开，因此我找到了原始图片并进行了替换。再次感谢您的帮助，现在图片已经正常工作了。 - Hopeless

Answer 1

尝试使用完整路径，例如： <img src="http://www.yourdomain.com/images/me.jpg" width="200" height="267" alt="me"> 为了测试，请打开http://www.yourdomain.com/images/me.jpg，您应该能够看到图片。如果不起作用，则可能存在您的html/jquery兼容性问题。请发布您剩余的html文件，并告诉我们您正在使用哪些jquery插件...

- Marcel

---

尝试这个...如果你的 index.html 或 index.php 文件在文件夹 /yourdomain 中，而你的图片包含在 /yourdomain/image 中，修改 src="./image/<your_image_filename>"。 - Rahul

嗨，伙计们，感谢你们的建议，非常感激。图片出了问题，文件可能已经损坏或者其他原因导致无法在任何东西中打开。所以我只是替换了这些图片。 - Hopeless

你不需要输入完整的域名，只需使用/images/me.jpg。 - Black

Answer 2

我的图片实际上是损坏的或者不能正常工作，因为我无法在Photoshop中打开它们，所以我不得不替换这些图片。

- Hopeless

Answer 3

不要使用这种语法

<img src="images/me.jpg" width="200" height="267" alt="me">

请这样使用

import img1 from '../images/me.jpg';
<img src={img1} width="200" height="267" alt="me">

一定会有效果

- Aditya Ranjan

---

这救了我的命，谢谢你。 - undefined

Answer 4

我昨晚刚开始学写HTML，所以这是一个非常初级的回答，因为我之前也遇到了同样的问题。但如果你使用的是Windows电脑，那么文件路径中的斜杠应该是反斜杠而不是正斜杠。

- P1sces

Answer 5

我刚遇到了同样的问题。文件名中有大写字母。一些图片可以加载，一些则不能。一些图片的文件扩展名是大写的.JPG，而另一些则是小写的.jpg。我的HTML代码使用小写的.jpg引用了所有的图像。

我正在我的Synology DS上运行Web服务器。

- The Bisto Kid

Answer 6

如果您正在使用dev、staging等，请确保您在正确的子域中。

我也曾经想知道，直到我发现我在暂存域上，而该图像不存在。

还要确保清除缓存。

- Black

Answer 7

如果你尝试了不同的方法，但都没有成功，只需将图像文件移动到与你的 HTML 文件在同一工作文件夹中。

以下内容有效：

<img src="me.jpg" width="200" height="267" alt="me">

- DEVIK SONI

Answer 8

另一个可能的原因是您的服务器存在错误，导致它崩溃。当发生这种情况时，它将显示相同的错误。

如果您的服务器在崩溃时自动重新启动，则很难重现此错误以修复它。

我在使用NodeJS的PM2时遇到了这个问题。

- kiwicomb123

Answer 9

如果你正在使用Thymeleaf，请注意。那么你必须有类似这样的源代码：（它自己通过，不需要获取存储库路径...）。

<div id="upperPart">
    <img id="foxPicture" th:src="greenfox.png" height="200" width="200" alt="Green Fox logo"/>
    <a class="Mr.Fox_description">This is Mr. Fox. Currently living on pizza and lemonade. He knows 2 tricks. </a>
</div>

- Jan Lacina

Answer 10

• 列表项
  1. 只需在您的驱动器上找到图像位置
  2. 选择图像
  3. 使用您喜欢的浏览器打开它
  4. 转到URL栏
  5. 从URL栏复制位置
  6. 在img src =（此处粘贴）中使用它
  7. 它看起来像这样
  8. img src="file:///C:/Users/Mercy/Documents/WEB%20DEVELOPMENT/HTML5/lion.jpg" alt="狮子头像" height="300" width="500"

- Rafikul Alam