Erro ao colocar imagens no template do blogger. Como resolver?

Ao tentar colocar uma imagem utilizando-se da tag <img> no template do Blogger, muitas pessoas podem ter problema se não tiver um conhecimento de um fator muito importante a ser considerado.

Eu mesmo já caí nesse erro: Colocava a tag com a imagem no template do Blogger, mas o mesmo retornava com um erro, dizendo que havia um problema ao carregar a visualização do template.


O fato é simples: A tag img do HTML nem sempre é escrita da forma que deve ser lida pelo XML.

Vejamos a simples diferença no seguinte código:

No HMTL, geralmente, se escreve assim:

<img src="sua imagem.jpg" height="100" width="100">

Ao colocar esse código no template do Blogger, com certeza você terá problemas, e ele dirá que não é possível carregar a visualização devido a um problema, que pode ser o fechamento de tag:

Então, faça essa alteração:

<img src='sua imagem.jpg' height='100' width='100' />

Você notou a diferença?

Foi uma barra e o símbolo de maior (/>), ao invés de (>) somente. Também foram trocadas as aspas duplas pelas aspas comuns.


Observação: O mais importante dessa alteração é a colocação da barra (/) para fechar a tag. O padrão é colocar as aspas comuns no template, mas, se você colocar aspas duplas, não haverá problema, desde que você apenas feche a tag com barra, assim:

<img src="sua imagem.jpg" height="100" width="100" />