Exibir imagem com JavaScript

Siddharth Swami 18 outubro 2021

JavaScript JavaScriptImage

JavaScript é conhecido como a linguagem de desenvolvimento da web. Usando JavaScript, podemos tornar nossa página da web atraente inserindo imagens nela.

Por padrão, usamos a tag <img> em HTML para exibir imagens. Na tag <img>, temos um método conhecido como src, que ajuda a obter a fonte da imagem que demos a exibir. No src, temos que dar a trajetória completa da imagem; caso contrário, ele gerará um erro. A largura, altura da imagem também precisa ser especificada.

JavaScript possui sua própria tag img, que nos ajuda a inserir uma imagem em nossa página web. Podemos criar uma função reutilizável. Aqui, usaremos o elemento img novamente, mas de forma diferente.

Estaremos criando uma função chamada display_image(), que consistirá em parâmetros como source, width, height e alt de uma imagem nela. Estaremos usando um createElement() para criar um elemento na função. Dessa forma, podemos exibir imagens dinamicamente onde quer que chamemos esta função.

Por exemplo,

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
function display_image(src, width, height, alt) {
    var a = document.createElement("img");
    a.src = src;
    a.width = width;
    a.height = height;
    a.alt = alt;
    document.body.appendChild(a);
}
display_image('JavaScript.jpg', 
                 276, 
                 110, 
                 'JavaScriptImage');
</script>
</body>
</html>

Produção:

exibir imagem com javascript

O exemplo acima exibe uma imagem na página da web com base na fonte fornecida. A função document.body.appendChild() adiciona o elemento fornecido ao corpo da página da web.