Comment fermer correctement la balise <img> ?

Question

<img src='stackoverflow.png'>
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />

Lequel ou lesquels d'entre eux sont corrects ?

Answer 1

Il est utile d'avoir la balise de fermeture si vous essayez un jour de le lire avec un analyseur XHTML. C'est peut-être un cas limite, mais je le fais tout le temps. Cela ne fait pas de mal de l'avoir, et cela signifie que je sais que nous pouvons utiliser un ensemble de lecteurs XML qui ne s'effondreront pas lorsqu'ils rencontreront une balise non fermée.

Si vous n'essayez jamais d'analyser le contenu, ignorez la fermeture.

Answer 2

-La balise est vide et ne contient que des attributs. -La balise n'a pas de balise 'Closing'.

Donc,

<img src='stackoverflow.png'>
<img src='stackoverflow.png' />

Les deux sont corrects en HTML5 également.

Answer 3

Malheureusement, les solutions ci-dessus n'ont pas fonctionné dans mon cas - peut-être parce que j'ai placé le bouton à l'intérieur d'une étiquette de formulaire. Ce code ...

<input class="button" type="submit" value=" ">
    <img src="../assets/logo.png" alt="test" />
</input>

... conduit toujours à une erreur (avec ou sans le slash de fermeture de la balise img) :

error  Parsing error: x-invalid-end-tag  vue/no-parsing-error

✖ 1 problem (1 error, 0 warnings)

Une sorte de solution de contournement qui a fonctionné consistait à définir l'image comme image de fond au moyen de css.

L'extrait html décrit uniquement le bouton. L'attribut value contient un seul blanc afin d'éviter que certains navigateurs ne présentent un texte par défaut indésirable.

<input class="button" type="submit" value=" " />

le CSS définit l'image d'arrière-plan du bouton :

.button {
  display: block;
  width: 6em;
  height: 6em;
  color: white;
  background-color: #639f59;
  padding: 0.4em 1.2em;
  box-shadow: inset 0 -0.6em 1em -0.35em rgba(5, 122, 11, 0.30),
    inset 0 0.6em 2em -0.3em rgba(255, 255, 255, 0.30),
    inset 0 0 0em 0.05em rgba(255, 255, 255, 0.30);
  cursor: pointer;
  background: url("../assets/logo.png") ;
  background-repeat: no-repeat;
  background-size: 6em;
  background-position: center;
  border: 0;
  border-radius: 3em;
}