Conjunto de Javascript img src

Eu provavelmente estou sentindo falta de algo simples, mas é muito chato quando tudo que você lê não funciona. Eu tenho imagens que podem ser duplicadas várias vezes ao longo de uma página gerada dinamicamente. Então, a coisa óbvia a fazer é pré-carregá-lo e usar essa variável como fonte o tempo todo.

var searchPic; function LoadImages() { searchPic = new Image(100,100); searchPic.src = "XXXX/YYYY/search.png"; // This is correct and the path is correct } 

então eu defino a imagem usando

  document["pic1"].src = searchPic; 

ou

  $("#pic1").attr("src", searchPic); 

No entanto, a imagem nunca é definida corretamente no FireBug quando eu consultar a imagem que recebo [object HTMLImageElement] como o src da imagem

No IE eu recebo:

 http://localhost:8080/work/Sandbox/jpmetrix/[object] 

    Você deve estar definindo o src usando isto:

     document["pic1"].src = searchPic.src; 

    ou

     $("#pic1").attr("src", searchPic.src); 

    JavaScript puro para criar uma tag img e add attributes manualmente

     var image = document.createElement("img"); var imageParent = document.getElementById("body"); image.id = "id"; image.className = "class"; image.src = searchPic.src; // image.src = "IMAGE URL/PATH" imageParent.appendChild(image); 

    Definir src em pic1

     document["pic1"].src = searchPic.src; 

    ou

     document.getElementById("#pic1").src= searchPic.src; 

    j-Query para arquivar isso,

     $("#pic1").attr("src", searchPic.src); 

    Instâncias do construtor de imagem não são destinadas a serem usadas em qualquer lugar. Você simplesmente define o src , e a imagem é pré-carregada … e é isso, o show acabou. Você pode descartar o object e seguir em frente.

     document["pic1"].src = "XXXX/YYYY/search.png"; 

    é o que você deveria estar fazendo. Você ainda pode usar o construtor de imagem e executar a segunda ação no manipulador onload do seu searchPic . Isso garante que a imagem seja carregada antes de você definir o src no object img real.

    Igual a:

     function LoadImages() { searchPic = new Image(); searchPic.onload=function () { document["pic1"].src = "XXXX/YYYY/search.png"; } searchPic.src = "XXXX/YYYY/search.png"; // This is correct and the path is correct } 

    Além disso, uma maneira de resolver isso é usar document.createElement e criar seu html img e definir seus atributos como este.

     var image = document.createElement("img"); var imageParent = document.getElementById("Id of HTML element to append the img"); image.id = "Id"; image.className = "class"; image.src = searchPic.src; imageParent.appendChild(image); 

    OBSERVAÇÃO : Um ponto é que a comunidade Javascript agora incentiva os desenvolvedores a usar seletores de documentos como querySelector , getElementById e getElementsByClassName vez de documentar [“pic1”].

     document["pic1"].src = searchPic.src 

    Deveria trabalhar

    Você não precisa construir uma imagem totalmente nova … o atributo src só usa um valor de string 🙂

    Você precisa definir

     document["pic1"].src = searchPic.src; 

    O searchPic em si é sua imagem (), você precisa ler o src que você definiu.

    Sua propriedade src é um object porque você está configurando o elemento src para ser a imagem inteira que você criou em JavaScript.

    Experimentar

     document["pic1"].src = searchPic.src; 

    Uau! quando você usa src , o src de searchPic deve ser usado.

     document["pic1"].src = searchPic.src 

    parece melhor

    Se você estiver usando o WinJS, você pode alterar o src através das funções Utilities .

     WinJS.Utilities.id("pic1").setAttribute("src", searchPic.src);