Javascript establecido img src

96

Probablemente me esté perdiendo algo simple, pero es bastante molesto cuando todo lo que lee no funciona. Tengo imágenes que pueden duplicarse muchas veces en el transcurso de una página generada dinámicamente. Entonces, lo obvio es precargarlo y usar esa variable como fuente todo el tiempo.

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

luego configuro la imagen usando

  document["pic1"].src = searchPic;

o

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

Sin embargo, la imagen nunca se configura correctamente en FireBug cuando consulto la imagen que obtengo [object HTMLImageElement]como srcde la imagen

En IE obtengo:

http://localhost:8080/work/Sandbox/jpmetrix/[object]
Alexis Wilke
fuente
Esto podría ayudar a stackoverflow.com/questions/4459379/…
Sandeep Amarnath

Respuestas:

96

Deberías configurar el src usando esto:

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

o

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

JavaScript puro para crear imgetiquetas y add attributesmanualmente,

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);

Establecer src en pic1

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

o con getElementById

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

j-Query para archivar esto,

$("#pic1").attr("src", searchPic.src);
Jay Patel
fuente
6
document.getElementById ("pic1") sin #
Gianluca Demarinis
6

Las instancias del constructor de imágenes no deben usarse en ningún lugar. Simplemente configura las srcprecargas de imagen y, eso es todo, se acabó el programa. Puedes descartar el objeto y seguir adelante.

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

es lo que deberías estar haciendo. Todavía puede usar el constructor de imágenes y realizar la segunda acción en el onloadcontrolador de su searchPic. Esto asegura que la imagen se cargue antes de configurar el objeto srcreal img.

Al igual que:

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
}
Bretón
fuente
si establece src en onload (), obtiene un bucle infinito que golpea al servidor, es decir, cuando se ha cargado src, llama a onload.
David Newcomb
hay algo más que va mal ya que un evento de carga solo puede dispararse una vez. No puede hacer que vuelva a disparar configurando la fuente a la misma imagen.
Breton
1
Tiene razón, hay otros artículos de SO que hablan sobre problemas extraños de almacenamiento en caché cuando "XXXX / YYYY / search.png" es una imagen de cámara web o algo que cambia en el lado del servidor. Sugirieron que cambiemos el enlace a "XXXX / YYYY / search.png? T = <fecha>". Su solución fue la más agradable y limpia, así que combiné las dos y golpeó al servidor.
David Newcomb
@DavidNewcomb ¡Ay! eso es complicado. En ese caso, creo que me desharía de la nueva parte Image () y, en su lugar, tendría dos imágenes dom reales, como un búfer doble. ocultar imagen1, ocultar imagen2. en un temporizador de intervalo: establezca src en image1, y en image1.onload, muestre 1, oculte 2. Intervalos de incendios: establezca src en image2. en image2.onload, mostrar 2, ocultar 1. esperar, disparos de intervalo: establecer src en image1. en image1.onload, mostrar 1, ocultar 2- etc.etc ...
Breton
5

Además, una forma de resolver esto es usar document.createElementy crear su img html y establecer sus atributos de esta manera.

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);

OBSERVACIÓN : Un punto es que la comunidad Javascript en este momento alienta a los desarrolladores a usar selectores de documentos como querySelector, getElementByIdy en getElementsByClassNamelugar de document ["pic1"].

ambodi
fuente
2
document["pic1"].src = searchPic.src

Deberia trabajar

Nir Levy
fuente
1

No necesita construir una imagen completamente nueva ... el atributo src solo toma un valor de cadena :-)

JorenB
fuente
1
Si la página se genera dinámicamente usando javascript, querrá que la imagen se descargue cuando se cargue la página para que no tenga un retraso molesto la primera vez que crea un elemento que lo necesita. Esa es la razón para crear el objeto Imagen.
tvanfosson
Tienes razón, no fui muy preciso en mi respuesta. Solo quise decir que el atributo src toma una cadena y me olvidé por completo de la ventaja del almacenamiento en caché de crear el Imageon de antemano. ¡Gracias!
JorenB
0

Necesitas configurar

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

El searchPic en sí es su Image (), necesita leer el src que estableció.

Mat Mannion
fuente
0

Su propiedad src es un objeto porque está configurando el elemento src para que sea la imagen completa que creó en JavaScript.

Tratar

document["pic1"].src = searchPic.src;
Cᴏʀʏ
fuente
0

¡Guauu! cuando se utiliza srcentonces srcde searchPicdebe ser utilizado también.

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

Se ve mejor

Dewfy
fuente
0

Si está utilizando WinJS , puede cambiar a srctravés de las Utilitiesfunciones.

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