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

【问题标题】：My jpg and png image is not showing on my browser?我的 jpg 和 png 图像没有显示在我的浏览器上？
【发布时间】：2020-10-07 20:45:53
【问题描述】：

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

    <html>
  <body>

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

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

   </body>
</html>

【问题讨论】：

您不必选择格式，您必须输入准确的名称和准确的格式。所以去看看吧
好的，我改了还是不行
那么，你有这个html页面在一个文件夹中，图片在同一个文件夹中吗？
什么？抱歉，我对 html 真的很陌生
这不是html问题，只是你把文件放在同一个文件夹里！

标签： html image png jpeg

【解决方案1】：

首先：您的<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

【讨论】：

【解决方案2】：

您必须将 alt 属性添加到 img 标记。为了让图片正常工作，如果找不到 src 图片，它必须有备用图片或名称才能显示。

像这样：

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

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

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

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

【讨论】：

alt 属性用于在文件无法显示时显示替代文本
阅读第一段
没问题！ ^_^