我的 jpg 和 png 图像没有显示在我的浏览器上？

Question

所以我有一个徽标，我想在 HTML 中的浏览器中显示它，我已经尝试将其作为 jpg 和 png 格式显示，但都不起作用。她是我的密码：

    <html>
  <body>

    <head>
    <title>astro blog pro</title>
    </head>

    <img src="Astro Blog Pro Logo.png" />

   </body>
</html>

Answer 1

您必须将 alt 属性添加到 img 标签。为了使图片正常工作，如果找不到 src 图片，它必须有替代图片或名称来显示。

像这样：

<img src="img.png" alt="This is my image" />

使用alt属性时，可以任意命名。因为 alt 代表替代。

它可能不起作用的另一个原因：该图像可能与您的 HTML 文档不在同一文件夹中。您应该将所有文档移动到同一个文件夹中。

如果您使用的是在线 IDE，则没有解决方案，因为您只能使用带有 URL 的在线图片。

Answer 2

首先：您的 <body> 标签中有一个 <head> 标签无效（在所有 HTML 标准中）。您应该阅读 html 文档结构的基础知识。

您可以检查语法，例如这里 https://www.freeformatter.com/html-validator.html（有很多语法检查器，如果您使用 (Linux)，也适用于命令行）。

这应该有效：

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >    
    <title>astro blog pro</title>
  </head>
  <body>
    <img src="Astro_Blog_Pro_Logo.png" alt="put image description here"/>
   </body>
</html>

顺便说一句：不要使用空格，因为 <img> 是一种资源，将由浏览器解析，空格映射到 %20，所以 "Astro Blog" 变成 "Astro%20Blog"

参见：https://www.w3schools.com/tags/ref_urlencode.ASP

我的 jpg 和 png 图像没有显示在我的浏览器上？

My jpg and png image is not showing on my browser?

html

png

jpeg

image