HTML Como colocar imagem no html *sou iniciante e a imagem está saindo bugada

[Vitor2k]

Fala galera beleza? Tentei colocar imagens no html, mas só aparece uma miniatura no lugar da imagem.

 

Eu coloquei o comando

<img src="Pictures/Supreme paint.png">

Esse comando não foi, só apareceu uma miniatura bugada. 

 

Dps eu usei o comando para colocar outra imagem png. O nome dela não tinha .png no final,  porém a imagem só aparecia se eu colocasse .png antes das aspas na tag img. 

 

Outra coisa q eu queria saber é se nome da imagem original tiver espaço eu tenho q tirar pra ela funcionar?

[Adriano_web]

Olá Vitor2K, provavelmente você colocou o caminho errado.

 

Olhe as pastas e marque os nomes correspondentes corretamente.

 

Vamos imaginar que o seu arquivo .html esteja em uma pasta chamada webdev, e dentro desta pasta estivesse alocada mais uma pasta com o nome image. No arquivo .html você chamaria a imagem com o atributo source indicando "image/nome.jpg" certo? Então ficaria:  <img src="image/nome.jpg">.

 

Leve em consideração também que se você errar qualquer letra a imagem também não aparecera. No seu código você colocou o caminho(source) "Picture/Supreme paint.png". Esteja ciente que o nome da pasta Picture não esteja totalmente em minúscula como "picture/Supreme paint.png", veja se a extensão usada também é a mesma, "Supreme paint.png" poderia ser "Supreme paint.jpg" ou "Supreme paint.gif". Normalmente no começo esses erros são constantes.

 

FORMA CERTA:

<img src="image/nome.jpg" al...

 

FORMA ERRADA:

<img src="nome.jpg" al...

 

[DiF]

7 horas atrás, Adriano_web disse:

FORMA CERTA:

<img src="image/nome.jpg" al...

 

FORMA ERRADA:

<img src="nome.jpg" al...

Na verdade as duas formas estão corretas. 

No primeiro exemplo indica que a imagem está no diretório image. Já o segundo indica que a imagem está no root.

Não pode dizer que é "forma errada".

 

Mas concordo com você que a causa do problema é caminho errado.

 

@Vitor2k Um detalhe é que não é indicado colocar o nome da imagem com espaço. acrescente um undeline no nome da imagem para juntar as palavras.