Como criar uma nova tag img com JQuery, com o src e id de um objeto JavaScript?

87

Eu entendo JQuery no sentido básico, mas definitivamente sou novo nele e suspeito que seja muito fácil.

Eu tenho minha imagem src e id em uma resposta JSON (convertida em um objeto) e, portanto, os valores corretos em responseObject.imgurl e responseObject.imgid, e agora gostaria de criar uma imagem com ela e anexá-la a um div (vamos chamá-lo <div id="imagediv">. Estou um pouco preso na construção dinâmica de <img src="dynamic" id="dynamic">- a maioria dos exemplos que vi envolve a substituição do src em uma imagem existente, mas não tenho uma imagem existente.

javascript jquery image

— Peter
fonte

138

Em jQuery, um novo elemento pode ser criado passando uma string HTML para o construtor, conforme mostrado abaixo:

var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
img.attr('src', responseObject.imgurl);
img.appendTo('#imagediv');

— Rob W
fonte

@ a7omiton Ver o código-fonte através do menu de contexto ou do inspetor? O menu de contexto (ou Ctrl + U) mostra os dados recebidos do servidor sem as alterações feitas pelo JavaScript. Use o inspetor DOM para ver o HTML ativo do documento com alterações ativas.

— Rob W

Ops, desculpe, eu excluí o comentário: /, ele aparece nas ferramentas de desenvolvimento agora, a página estava

— travada

Você está certo, porém, que as imagens não aparecem na página de origem (ctrl + u)

— a7omiton

@ a7omiton Você pode desativar os avisos 404 sobre jquery.min.map clicando no ícone de engrenagens no canto inferior direito e desativando a opção "Ativar mapas de origem".

— Rob W

Sim, eu estava apenas olhando para a solução de paul_irish ( stackoverflow.com/questions/18365315/… ). Obrigado por isso :)

— a7omiton 01 de

85

var img = $('<img />', { 
  id: 'Myid',
  src: 'MySrc.gif',
  alt: 'MyAlt'
});
img.appendTo($('#YourDiv'));

— Frenchi In LA
fonte

17

Você economiza alguns bytes evitando o .attrcompletamente, passando as propriedades para o construtor jQuery :

var img = $('<img />',
             { id: 'Myid',
               src: 'MySrc.gif', 
               width: 300
             })
              .appendTo($('#YourDiv'));

— ErickBest
fonte

2

Para quem precisa do mesmo recurso no IE 8, resolvi o problema da seguinte maneira:

  var myImage = $('<img/>');

               myImage.attr('width', 300);
               myImage.attr('height', 300);
               myImage.attr('class', "groupMediaPhoto");
               myImage.attr('src', photoUrl);

Não consegui forçar o IE8 a usar o objeto no construtor.

— Vedran Maricevic.
fonte