HTML：图像不会显示？

Posted 2023-03-05

【中文标题】HTML：图像不会显示？

【英文标题】：HTML: Image won't display?

【发布时间】：2014-08-06 21:27:36

【问题描述】：

我对 html 有点陌生。我正在尝试在我的网站上显示图像，但由于某种原因，它只显示一个带有问号的蓝色框。我在互联网上到处寻找，但似乎没有一个解决方案对我有用。我试过了：

<img src="iwojimaflag.jpg"/>

<img src="images/iwojimaflag.jpg"/>

<img src="Applications/MAMP/htdocs/Symfony/src/Acme/WebBundle/Resources/public/images/iwojimaflag.jpg"/>

【问题讨论】：

您的图片相对于您的 HTML 文件存储在哪里（例如：HTML 位于“myapp/index.html”，而图片位于“myapp/images/myimage.jpg”？

image: "/Resources/public/images/iwojimaflag.jpg" -------------------- html: "/Resources/views/默认/index.html.twig"

【参考方案1】：

如果您将<img src="iwojimaflag.jpg"/> 放在html 代码中，则将iwojimaflag.jpg 和html 文件放在同一个文件夹中。

如果您输入<img src="images/iwojimaflag.jpg"/>，则必须创建“images”文件夹并将图像 iwojimaflag.jpg 放入该文件夹。

【参考方案2】：

让我们看看引用图像的方法。

返回一个目录

../

目录中的文件夹：

 foldername/

目录中的文件

 imagename.jpg

现在，让我们将它们与您指定的地址结合起来。

 /Resources/views/Default/index.html
 /Resources/public/images/iwojimaflag.jpg

从html文件中引用的第一个公共目录是三个后面：

 ../../../

它在其中的两个文件夹中：

 ../../../public/images/

你已经到达了图像：

 ../../../public/images/iwojimaflag.jpg

注意：这是假设您正在访问您在评论中指定的 domain.com/Resources/views/Default/index.html 上的页面。

【讨论】：

那么...我应该在我的代码中写什么？ <img src="/public/images/iwojimaflag.jpg/>"?因为那对我不起作用。我也试过<img src="../../../public/images/iwojimaflag.jpg"/>，但也没有用。

嗯......当您查看 index.html 时，地址栏中的地址是什么？

你已经写好了。 ../Resources/views/Default/index.html

所以...你已经有了答案。只看上面。如果它不起作用，请查看您的浏览器调试器并解决错误...或修复您的网站设置。祝你好运

【参考方案3】：

只是为了扩展niko的回答：

您可以通过其 URL 引用任何图像。无论在哪里，只要可以访问，您都可以将其用作src。示例：

相对位置：

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

相对于文档的位置寻找图像。如果您的文档位于http://example.com/site/document.html，那么您的images 文件夹应该与您的document.html 文件所在的目录相同。

绝对位置：

<img src="/site/images/image.png">
<img src="http://example.com/site/images/image.png">

或

<img src="http://another-example.com/images/image.png">

在这种情况下，将从文档站点的根目录中寻找您的图像，因此，如果您的 document.html 位于 http://example.com/site/document.html，则根目录将位于 http://example.com/（或它们各自的服务器文件系统上的目录，通常是www/）。前两个示例是相同的，因为它们都指向同一个主机，请将第一个 / 视为服务器根目录的别名。在第二种情况下，图像位于另一个主机中，因此您必须指定图像的完整 URL。

关于/、.和..：

/ 符号将始终返回文件系统或站点的根目录。

单点./指向你所在的同一个目录。

而双点../ 将指向上层目录，或包含实际工作目录的目录。

因此您可以使用它们构建相对路线。

给定路由 http://example.com/dir/one/two/three/ 和您的 调用 文档在 three/ 内的示例：

"./pictures/image.png"

或者只是

"pictures/image.png"

将尝试在http://example.com/dir/one/two/three/ 中查找名为pictures 的目录。

"../pictures/image.png"

将尝试在http://example.com/dir/one/two/ 中查找名为pictures 的目录。

"/pictures/image.png"

将尝试直接在/ 或example.com（相同），与directory 处于同一级别查找名为pictures 的目录。

【讨论】：

好的，所以我尝试转到“localhost/Applications/MAMP/htdocs/Symfony/src/Acme/WebBundle/…”并收到 404 not found 错误，但我仔细检查了图片是否存在！我还仔细检查了网址是否正确！

我也尝试了<img src="..."/>' and replaced the ...` 与你上面所说的但根据我的目录。没用。

如果您指定主机名，您应该在它前面加上 http:// 或您用来检索图像的任何协议。另请注意，您站点的根目录 =/= 文件系统的根目录。 Http://localhost 可能指向 /var/www/ 而不是 /。

你看，当你启动一个服务器时，它会在文件系统上设置一个虚拟根，它会位于它被配置为网站的根目录。假设你的文件系统的根是/，并且你的服务器被配置为将它的根设置为/var/www/，所以http://localhost/将从/var/www/开始，如果你尝试访问http://localhost/pic/image.png，你必须有你的图像在/var/www/pic/image.png

同样，如果您的文档位于文件系统上的http://localhost/doc/index.html 或/var/www/doc/index.html，并且如果您的文档需要带有src=pic/image.png 的图像，则您的图像应该位于/var/www/doc/pic/image.png。或者如果 src=/pic/image.png 那么它必须在 /var/www/pic/image.png

【参考方案4】：

我承认没有阅读整个线程。但是，当我遇到类似的问题时，我发现仔细检查文件名的大小写并在 HTML 参考中更正它可以解决类似的问题。 因此，Windows 上的本地预览可以正常工作，但是当我发布到我的服务器（托管 Linux）时，我必须确保将“mugshot.jpg”更改为“mugshot.JPG”。部分问题是 Windows 中的默认设置将完整文件名隐藏在文件类型指示后面。

【参考方案5】：

我发现跳过文件和位置名称周围的引号“”会显示图像... 我在 MacBook 上这样做......

【参考方案6】：

以下是最常见的原因

文件路径不正确

文件名拼写错误

错误的文件扩展名

文件丢失

尚未为图片设置读取权限

注意： 在 *nix 系统上，考虑使用以下命令为图像添加读取权限：

chmod o+r imagedirectoryAddress/imageName.extension

或此命令为所有图像添加读取权限：

chmod o+r imagedirectoryAddress/*.extension

如果您需要更多信息，请参阅此post。

【参考方案7】：

img 
  width: 200px;

<img src="https://image.ibb.co/gmmneK/children_593313_340.jpg"/>

<img src="https://image.ibb.co/e0RLzK/entrepreneur_1340649_340.jpg"/>

<img src="https://image.ibb.co/cks4Rz/typing_849806_340.jpg"/>

请看上面的代码。