【问题标题】: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】:

首先:您的&lt;body&gt; 标记内有一个&lt;head&gt; 标记,该标记无效(在所有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>

顺便说一句:不要不使用空格,因为&lt;img&gt; 是一个资源,将由浏览器解析,空格映射到%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 属性用于在文件无法显示时显示替代文本
    • 阅读第一段
    • 没问题! ^_^
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-06-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多