HTML：图像不会显示？

HTML: Image won't display?

提问by Gretta

I'm kind of new to HTML. I'm trying to display an image on my website but for some reason, it just shows a blue box with a question mark in it. I've looked everywhere on the internet, but none of the solutions seemed to work for me. I've tried:

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

<img src="iwojimaflag.jpg"/>

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

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

回答by arielnmz

Just to expand niko's answer:

只是为了扩展niko的答案：

You can reference any image via its URL. No matter where it is, as long as it's accesible you can use it as the src. Example:

您可以通过其 URL 引用任何图像。无论它在哪里，只要它是可访问的，你就可以将它用作src. 例子：

Relative location:

相对位置：

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

The image is sought relative to the document's location. If your document is at http://example.com/site/document.html, then your imagesfolder should be on the same directory where your document.htmlfile is.

图像是相对于文档的位置搜索的。如果您的文档位于http://example.com/site/document.html，则您的images文件夹应位于您的document.html文件所在的同一目录中。

Absolute location:

绝对位置：

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

or

或者

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

In this case, your image will be sought from the document site's root, so, if your document.htmlis at http://example.com/site/document.html, the root would be at http://example.com/(or it's respective directory on the server's filesystem, commonly www/). The first two examples are the same, since both point to the same host, Think of the first /as an alias for your server's root. In the second case, the image is located in another host, so you'd have to specify the complete URL of the image.

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

Regarding /, .and ..:

关于/，.和..：

The /symbol will always return the root of a filesystem or site.

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

The single point ./points to the same directory where you are.

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

And the double point ../will point to the upper directory, or the one that contains the actual working directory.

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

So you can build relative routes using them.

所以你可以使用它们构建相对路由。

Examples given the route http://example.com/dir/one/two/three/and your callingdocument being inside three/:

给出路线http://example.com/dir/one/two/three/和您的呼叫文档在里面的示例three/：

"./pictures/image.png"

or just

要不就

"pictures/image.png"

Will try to find a directory named picturesinside http://example.com/dir/one/two/three/.

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

"../pictures/image.png"

Will try to find a directory named picturesinside http://example.com/dir/one/two/.

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

"/pictures/image.png"

Will try to find a directory named picturesdirectly at /or example.com(which are the same), on the same level as directory.

将试图找到一个新的目录pictures直接/或example.com（这是相同的），在相同的水平directory。

回答by Gretta

Lets look at ways to reference the image.

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

Back a directory

返回一个目录

../

Folder in a directory:

目录中的文件夹：

 foldername/

File in a directory

目录中的文件

 imagename.jpg

Now, lets combine them with the addresses you specified.

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

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

The first common directory referenced from the html file is three back:

html文件引用的第一个常用目录后面三个：

 ../../../

It is in within two folders in that:

它位于两个文件夹中：

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

And you've reached the image:

你已经到达了图像：

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

Note: This is assuming you are accessing a page at domain.com/Resources/views/Default/index.html as you specified in your comment.

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

回答by Arshiya Khanam

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

please see the above code.

请看上面的代码。

回答by Arshid KV

If you put <img src="iwojimaflag.jpg"/>in html code then place iwojimaflag.jpg and html file in same folder.

如果你 <img src="iwojimaflag.jpg"/>输入 html 代码，那么将 iwojimaflag.jpg 和 html 文件放在同一文件夹中。

If you put <img src="images/iwojimaflag.jpg"/>then you must create "images" folder and put image iwojimaflag.jpg in that folder.

如果你把<img src="images/iwojimaflag.jpg"/>那么你必须创建“图像”文件夹并将图像 iwojimaflag.jpg 放在该文件夹中。

回答by Clyde

I confess to not having read the whole thread. However when I faced a similar issue I found that checking carefully the case of the file name and correcting that in the HTML reference fixed a similar issue. So local preview on Windows worked but when I published to my server (hosted Linux) I had to make sure "mugshot.jpg" was changed to "mugshot.JPG". Part of the problem is the defaults in Windows hiding full file names behind file type indications.

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

回答by Marcin

I found that skipping the quotation marks "" around the file and location name displayed the image... I am doing this on MacBook....

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

回答by Farhad Maleki

Here are the most common reasons

以下是最常见的原因

• Incorrect file paths

• File names are misspelled

• Wrong file extension

• Files are missing

• The read permission has not been set for the image(s)

• 文件路径不正确

• 文件名拼写错误

• 错误的文件扩展名

• 文件丢失

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

Note:On *nix systems, consider using the following command to add read permission for an image:

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

chmod o+r imagedirectoryAddress/imageName.extension

or this command to add read permission for all images:

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

chmod o+r imagedirectoryAddress/*.extension

If you need more information, refer to this post.

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