Como exibir a imagem com JavaScript

JavaScript é uma linguagem de script dinâmica usada para efeitos dinâmicos em sites. Além disso, as páginas da web contêm imagens usando a tag html. Às vezes, a página leva muito tempo para carregar, então os desenvolvedores preferem adicionar imagens usando tags de imagem JavaScript que carregam dinamicamente e levam menos tempo para carregar ou exibir em qualquer clique.

Este artigo descreverá o processo para exibir imagens usando JavaScript.

Como exibir uma imagem com javascript?

Para exibir imagens com JavaScript, use o “createElement ()”Método para criar um nó de elemento HTML. Para conseguir isso, é preciso “img”Como um parâmetro.

Sintaxe
Para criar um nó de elemento, use a sintaxe dada:

documento.CreateElement (tipo)

Exemplo 1: Exibir imagem com javascript
Neste exemplo, não há necessidade de adicionar um código HTML porque adicionaremos uma imagem usando JavaScript. Para esse fim, escreva o seguinte código no arquivo JavaScript:

Função DisplayImage (src, largura, altura)
var iMg = documento.createElement ("img");
img.src = src;
img.largura = largura;
img.altura = altura;
documento.corpo.ApndendChild (IMG);

No trecho de código acima:

• Defina uma função “displayImage ()"Com a fonte da imagem"src","largura", e "altura”Como um parâmetro.
• Adicione uma etiqueta ou elemento de imagem em JavaScript, utilizando o “createElement ()”Método.
• Defina as propriedades da imagem como fonte, largura e altura de uma imagem.
• Em seguida, adicione a imagem ao corpo HTML usando o “documento.corpo.ApndendChild ()”Método.

Agora, chame a função "displayImage ()”E passe a altura, largura e fonte de uma imagem como argumento:

DisplayImage ('2.jpg ', 320, 250);

Saída

No próximo exemplo, consulte como mostrar uma imagem em um botão Clique.

Exemplo 2: Exibir imagem no botão Clique com a classe CSS
Este exemplo é sobre como uma classe CSS pode ser usada para exibir uma imagem em javascript e como a imagem aparecerá quando o botão for clicado. Primeiro, criaremos um botão em um arquivo html que chama o “displayImage ()”Função quando o botão é clicado:

Clique

Vamos criar uma classe CSS “ImageFeatures”Para definir os atributos da imagem como“comprimento", e "largura”De uma imagem:

.ImageFeatures

largura: 320;
Altura: 250;

Defina uma função “displayImage ()”Com um único parâmetro src. Em seguida, adicione um elemento de imagem usando o método createElement () e defina a fonte de uma imagem. Agora, adicione a classe “ImageFeatures”Para definir os atributos da imagem usando o“Lista de classe.adicionar()”Método. Por fim, anexe a tag de imagem em um documento usando o “documento.corpo.ApndendChild ()”Método:

Função DisplayImage (SRC)
var iMg = documento.createElement ("img");
img.src = src;
img.Lista de classe.add ("ImageFeatures");
documento.corpo.ApndendChild (IMG);

Como você pode ver, a imagem é exibida no botão Clique sem demora:

Exibimos a imagem com a ajuda do JavaScript.

Conclusão

Para exibir uma imagem com javascript, use o “createElement ()”Método para criar uma tag de imagem. Mais especificamente, o método CreateElement () é usado para criar um nó de elemento. Neste artigo, descrevemos o processo para exibir imagens usando JavaScript.