Tag de imagem HTML é usado para exibir imagens na página da web. A tag HTML img é uma tag vazia que contém apenas atributos; as tags de fechamento não são usadas no elemento de imagem HTML.

Vamos ver um exemplo de imagem HTML.

 <h2>HTML Image Example</h2> <img src="//techcodeview.com/img/html-tutorial/39/html-image.webp" alt="Good Morning Friends"> 

Saída:

Atributos da tag HTML img

O src e alt são atributos importantes da tag HTML img. Todos os atributos da tag de imagem HTML são fornecidos abaixo.

c

1) fonte

É um atributo necessário que descreve a origem ou caminho da imagem. Ele instrui o navegador onde procurar a imagem no servidor.

A localização da imagem pode estar no mesmo diretório ou em outro servidor.

2) tudo

O atributo alt define um texto alternativo para a imagem, caso ela não possa ser exibida. O valor do atributo alt descreve a imagem em palavras. O atributo alt é considerado bom para o potencial de SEO.

3) largura

É um atributo opcional que é usado para especificar a largura de exibição da imagem. Não é recomendado agora. Você deve aplicar CSS no lugar do atributo de largura.

4) altura

É h3 a altura da imagem. O atributo de altura HTML também oferece suporte a elementos iframe, imagem e objeto. Não é recomendado agora. Você deve aplicar CSS no lugar do atributo height.

Uso do atributo de altura e largura com tag img

Você aprendeu como inserir uma imagem em sua página web, agora se quisermos dar alguma altura e largura para exibir a imagem de acordo com nossa necessidade, podemos defini-la com atributos de altura e largura da imagem.

data de utilidade java

Exemplo:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

Saída:

Nota: Sempre tente inserir a imagem com altura e largura, caso contrário ela poderá piscar durante a exibição na página da web.

Uso do atributo alt

Podemos usar o atributo alt com marcação. Ele exibirá um texto alternativo caso a imagem não possa ser exibida no navegador. A seguir está o exemplo do atributo alt:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

Saída:

Como obter imagem de outro diretório/pasta?

Para inserir uma imagem na sua web, essa imagem deve estar presente na mesma pasta onde você colocou o arquivo HTML. Mas se em algum caso a imagem estiver disponível em algum outro diretório, você poderá acessá-la assim:

Na declaração acima, colocamos a imagem no disco local E ------> pasta de imagens ------> img/html-tutorial/39/html-image-2.webp.

Nota: Se o URL src estiver incorreto ou digitado incorretamente, sua imagem não será exibida na página da web, então tente colocar o URL correto.

Usar marcar como um link

Também podemos vincular uma imagem a outra página ou podemos usar uma imagem como link. Para fazer isso, coloque etiqueta dentro do marcação.

Exemplo:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp"> 

Saída:

Navegadores de suporte

Elemento	cromada	Ou seja	Raposa de fogo	Ópera	Safári
	Sim	Sim	Sim	Sim	Sim