Solucionado
Boa noite! Por favor, como faço para importar imagem para o VS CODE? Gostaria de colocar uma imagem principal e também imagens pequenas das redes sociais ou de outros sites. Eu tentei pelo paint, mas quando coloco no VS CODE a imagem aparece com um quadrado branco e grande da tela do paint.
Oi, tudo bem?
Para adicionarmos uma imagem no nosso projeto utilizando o VS Code, precisamos salvar a imagem dentro da pasta do projeto em formato png, ou seja, o arquivo precisa ser salvo com extensão .png, por exemplo: imagem.png, dessa forma a imagem não terá nenhum fundo.
Em seguida basta abrir o arquivo HTML uno qual você está desenvolvendo o código da sua página e usar a tag <img>para acrescentar sua imagem. Lembre-se de colocar os parâmetros src para indicar o caminho da imagem e o alt para escrever o texto alternativo para permitir que seu projeto se torne mais acessível. Ficaria assim:
<img src="imagem.png" alt="Texto alternativo aqui">Você mencionou que utilizou o paint para editar as imagens, mas essa ferramenta apresenta limitações e uma delas está no momento que salvamos as imagens, que mesmo estando em formato png ainda apresentam o fundo e não apenas a imagem principal que queremos manter. Podemos optar por utilizar imagens em formato png da internet.
No caso dos ícones recomendo o site "Iconfinder", onde você pode encontrar diferentes ícones e baixá-los no formato adequado para utilizar diretamente em seus projetos.
Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!
Muito obrigado, Rodrigo!
Rodrigo, eu salvei uma imagem do incofinder, mas ela ficou muito grande na página. Como faço para diminuir o tamanho?
Oi, tudo bem?
Ao clicarmos no ícone da imagem que queremos baixar, somos redirecionados para uma tela contendo o ícone do lado esquerdo e as informações de download do lado direito. Nela podemos selecionar a opção "png" e ao fazermos isso, várias opções de tamanho são colocadas abaixo. Você pode escolher a que melhor se adapte ao seu projeto, recomendo 64px para ícones.
Dessa forma, conseguiremos superar o problema da imagem ficar muito grande no seu projeto diretamente pelo download no iconfinder.
Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!
Show! Muito obrigado.