HTML：图像不会显示？

Question

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

<img src="iwojimaflag.jpg"/>

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

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

Answer 1

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

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

Answer 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 上的页面。

Answer 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 的目录。

Answer 4

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

Answer 5

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

Answer 6

以下是最常见的原因

• 文件路径不正确

• 文件名拼写错误

• 错误的文件扩展名

• 文件丢失

• 尚未为图片设置读取权限

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

chmod o+r imagedirectoryAddress/imageName.extension

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

chmod o+r imagedirectoryAddress/*.extension

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

Answer 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"/>

请看上面的代码。