Altere programaticamente o SRC de uma tag IMG

Ao projetar uma interface interativa do usuário, pode haver um requisito para anexar e remover certas imagens de tempos em tempos para envolver o usuário. Por exemplo, anexar várias imagens para dar ao usuário uma melhor compreensão do conceito ou criando efeitos. Em tais situações, mudando o SRC de um “img”Tag auxilia programaticamente a destacar um site.

Este artigo descreverá as abordagens para alterar o SRC de uma tag IMG programaticamente.

Como alterar/substituir programaticamente o SRC de uma tag IMG?

Para alterar o SRC de uma tag IMG programaticamente, aplique as seguintes abordagens:

• ““src”Atributo.
• jQuery's “attr ()”Método.

Método 1: Altere programaticamente o SRC de uma tag IMG usando o atributo SRC

O "src”O atributo especifica o URL de um arquivo externo. Esta abordagem pode fazer a transição da imagem alocada com uma nova.

Exemplo
Vamos ver as linhas de código abaixo estatadas:

Mudar

No trecho de código acima:

• Em primeiro lugar, especifique a imagem no “”Tag através da“src”Atributo.
• Depois disso, crie um botão com um anexo “ONCLICKEvento invocando a função myfunction ().
• Agora, no código JavaScript, defina a função chamada “MyFunction ()”. Em sua definição, redirecione a imagem especificada por seu ID com a ajuda do “getElementById ()”Método.
• Por fim, atribua um novo caminho à imagem acessada com a ajuda do “src”Atributo.
• Isso mudará resultante a imagem adicionada no gatilho do botão.

Saída

Na saída acima, pode -se observar que a imagem especificada é alterada com uma nova imagem no botão Clique.

Método 2: Altere programaticamente o SRC de uma tag IMG via jQuery

jQuery's “attr ()”O método é usado para definir ou retornar atributos e valores dos elementos selecionados. Este método pode ser aplicado para alterar o SRC de uma tag IMG alocando um novo caminho para a imagem buscada.

Sintaxe

$ (seletor).attr (atributo, valor);

Aqui:

• ““atributo”Indica o nome do atributo.
• ““valor”Corresponde ao novo valor do atributo.

Exemplo
Vamos passar para as linhas de código:

Mudar

No bloco de código acima:

• Da mesma forma, inclua uma imagem usando o “src”Atributo ter o declarado“eu ia”.
• Na próxima linha, crie um botão para anexar um “ONCLICK”Evento que invocará a função“MyFunction ()”.
• Agora, especifique a biblioteca jQuery usando o “src”Atributo.
• No código JS, declare uma função chamada “MyFunction ()”.
• Em sua definição, acesse a imagem especificada e aloque um novo caminho através do “attr ()”Método.
• Como resultado, a imagem será transferida no botão Clique.

Saída

Pode -se observar que a imagem foi alterada no gatilho do botão.

Conclusão

Para alterar/substituir o SRC de uma tag IMG programaticamente usando JavaScript, aplique o “src”Atributo ou JQuery's“attr ()”Método. Essas abordagens podem ser utilizadas para simplesmente buscar a imagem especificada e fazer a transição com a ajuda de um atributo predefinido e um método, respectivamente. Este artigo ilustrou as abordagens para alterar/substituir o SRC de uma tag IMG programaticamente.