Мое изображение jpg и png не отображается в моем браузере? - PullRequest
Новая
       85

Мое изображение jpg и png не отображается в моем браузере?

0 голосов
/ 18 июня 2020

Итак, у меня есть lo go, который я хочу показать в моем браузере в HTML, я пробовал его как jpg и png, ни то, ни другое не работает. Это мой код: 

    <html>
  <body>

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

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

   </body>
</html>

Ответы [ 2 ]

1 голос
/ 18 июня 2020

Во-первых: у вас есть тег <head> внутри вашего тега <body>, который не действует (во всех стандартах 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>

и btw: do не использовать пробелы , поскольку <img> - это ресурс, который будет разрешен браузер и пробелы сопоставляются с % 20 , так что "Astro Blog" становится "Astro% 20Blog"

см .: https://www.w3schools.com/tags/ref_urlencode.ASP

0 голосов
/ 18 июня 2020

Вы должны добавить атрибут alt к тегу img. Чтобы изображение работало правильно, оно должно иметь альтернативное изображение или имя для отображения, если оно не может найти изображение sr c.

Примерно так: 

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

При использовании атрибута alt вы можете называть его как хотите. Поскольку alt означает альтернативу.

Другая причина, по которой это может не работать: изображение может находиться не в той же папке, что и ваш документ HTML. Вам следует переместить все свои документы в одну папку.

Если вы используете онлайн-среду IDE, решения нет, поскольку вы можете использовать только онлайн-изображения с URL-адресом.

...