Exibir imagem com JavaScript
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:
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.