Atributo src do HTML <img>

Etiqueta <img> HTML

Definição e uso

Obrigatório src O atributo define a URL da imagem.

Existem duas maneiras de especificar a URL no atributo src Especificar URL no atributo:

1. URL absoluta - Link para imagem hospedada em outro site. Por exemplo:

src="https://www.codew3c.com/images/img_girl.jpg"

Atenção:As imagens externas podem estar protegidas por direitos autorais. Se você não obter permissão para usá-las, pode violar a lei de direitos autorais. Além disso, você não pode controlar as imagens externas; elas podem ser removidas ou alteradas subitamente.

2. URL relativa - Link para imagem hospedada no site.

Aqui, a URL não inclui o domínio. Se a URL não começar com uma barra invertida, ela será relativa à página atual. Por exemplo:

src="img_girl.jpg".

Se a URL começar com uma barra invertida, ela será relativa ao domínio. Por exemplo:

src="/images/img_girl.jpg".

Dica:Talvez seja melhor usar URLs relativos. Se você mudar o domínio, não haverá quebra de link.

Atenção:Se o navegador não encontrar a imagem, ele exibirá o ícone de link quebrado e o texto alt.

Dica:Para organizar o armazenamento do documento, os criadores geralmente armazenam os arquivos de imagem em uma pasta separada e geralmente nomeiam esses diretórios como "pics" ou "images" e o tipo. No tutorial online da CodeW3C.com, os engenheiros armazenam a maioria das imagens comuns em uma pasta chamada "i", "i" é a abreviação de "images", e a vantagem disso é que pode simplificar ao máximo o caminho.

Exemplo

Neste exemplo, inserimos na página uma foto de tulipa tirada pelo engenheiro da CodeW3C.com no Shanghai Flower Port, o nome do arquivo da foto é "eg_tulip.jpg", armazenado na pasta "i" do servidor. Este é o código-fonte:

<img src="/i/eg_tulip.jpg" />

O efeito do código acima é:


Experimente você mesmo

Dica:Você pode experimentar em nossa ferramenta de teste onlineExperimente você mesmoSe você mudar o nome do arquivo no exemplo para "eg_chinarose.jpg", verá uma foto de uma rosa chinesa. Assim:

Código-fonte:

<img src="/i/eg_chinarose.jpg" />

O efeito do código acima é:

Sintaxe

<img src="URL">

Valor do atributo

Valor Descrição
URL

Define a URL da imagem.

Valores possíveis:

  • URL absoluta - aponta para outro site (como src="http://www.example.com/image.gif")
  • URL relativa - aponta para arquivos dentro do site (como src="image.gif")

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte

Etiqueta <img> HTML