HTML图片无法显示，但src网址有效

Question

<img class="sealImage" alt="Image of Seal" src="file:///C:/Users/Anna/Pictures/Nikon%20Transfer/SEALS%20PROJECT/j3evn.jpg">

那并没有显示图像，只显示了alt属性的文本描述。 但是如果我去到

file:///C:/Users/Anna/Pictures/Nikon%20Transfer/SEALS%20PROJECT/j3evn.jpg

在浏览器中，图片会显示。

我现在正在Windows机器上的xampp上托管它。

我尝试了不同的浏览器，并使用和不使用%20代替空格来访问，但我知道使用是正确的方式。（实际上两种方式都可以）

我知道只有托管图片的机器上才能看到这些图片，这并不是问题。

- mtfurlan

---

确保，就像@William Yang发布的那样，您的图像位于托管网站的计算机上。将其放入您的www文件夹中，然后链接到类似这样的内容：“src='j3evn.jpg'”，然后您就可以开始了。 - totallyuneekname

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - ymakux

Answer 1

你的文件需要位于你的www目录中。例如，如果你在Windows上使用wamp服务器，j3evn.jpg应该位于以下位置，

C:/wamp/www/img/j3evn.jpg

而且你可以通过HTML访问它

<img class="sealImage" alt="Image of Seal" src="../img/j3evn.jpg">

请查找属于您的 Web 服务器的 www、public_html 或 html 文件夹。将您所有的文件和资源放置在该文件夹中。

希望这可以帮助您！

- William Yang

---

所以，我没有移动图片，而是创建了一个软链接。我认为，由于浏览器可以从托管目录外部访问它，所以这应该没问题。 - mtfurlan

@Scuzzball不行，你必须要将它们移动。所有的资源，例如HTML、CSS和JavaScript，都必须位于你的XAMPP的www目录中。 - William Yang

@Scuzzball，可以把它想象成你的xampp www文件夹是你想向世界展示的文件夹，而服务器/计算机上的所有其他文件夹都被隐藏起来。出于明显的安全原因，事情就是这样做的。 - William Yang

是的，我理解这一点，但这是一个永远不会在公开互联网上看到的项目，而且我只是使用了我熟悉的PHP完成了它，快速完成非常重要。实际上，应该使用其他工具完成这个项目。 - mtfurlan

Answer 2

即使我把图片放到正确的文件夹中，它们仍然无法显示，问题是它们没有正确的权限，我将权限更改为可读写和可执行。我使用了chmod 777 image.png命令。然后一切都正常了，图片能够正常显示。 :)

- user1751104

---

那就是我的问题！谢谢，我都快被它搞疯了！ - ChathuraG

这对我来说一直在发生，因为我正在跨平台工作，部署到Linux虚拟机。我想我现在已经看了这条评论3次了。 - Murphy4

Answer 3

由于您使用了“file：//”的URL链接，所以它无法工作。相反，您应该将您的目录与您的HTML文件匹配，例如：

假设我的文件放置在：

C:/myuser/project/file.html

我的想要的图片在：

C:/myuser/project2/image.png

我只需要这样匹配目录即可：

<img src="../project2/image.png" />

- Yotam

Answer 4

我的问题是在图片名前没有包含 "../"。

background-image: url("../image.png");

- Chris Hayes

Answer 5

我的问题是路径前面有/（assets是一个文件夹），例如： <img src="assets/images/logo.png> 是正确的，而<img src="/assets/images/logo.png> 返回错误。

- Martin

Answer 6

您可以尝试将图片放在源目录中。您可以通过将文件路径替换为 src="../imagenamehere.fileextension 来链接它。在您的情况下，是 j3evn.jpg。

- Kevin

Answer 7

将图像文件夹的名称更改为img，然后使用HTML代码。

- chandan janrdan

Answer 8

这并不是对这个特定问题的直接回答。但是，如果您正确地提供了像这样的图像地址，并且想知道为什么在输出中没有看到图像，那么请注意：

<img src ="../../../public/image.jpg"/> 

直接给出图片名称，例如：

<img src="image.jpg"/>

如果您在 public 文件夹内有一个文件夹，比如说 icons，那么请按如下方式给出：

<img src="/icons/logo.jpg"/>

这是因为React已经预期您将所有图像放在“public”文件夹中。因此，您不需要显式地指定它。

- Balaji Ganesh

Answer 9

简单的解决方案是：

1.将图像文件和HTML文件放在同一个文件夹中。

2.代码：<img src="Desert.png">//您的图像名称。

3.将文件夹保留在D驱动器中。

如果将文件夹放在桌面上（即C驱动器），可能会遇到权限问题。

- shubham1js

Answer 10

在你的 angular.json 文件夹结构中应该像这样

"assets": [             
  "src/assets",
  "src/favicon.ico"
],

不要这个

"assets": [     
  "src/favicon.ico",
  "src/assets",
],

这解决了我的问题。

- Manish Kumar

---

这个回答似乎与原问题没有关联，也没有回答它。 - Studocwho