web-dev-qa-db-fra.com

Javascript set img src

Il me manque probablement quelque chose de simple, mais c'est assez énervant quand tout ce que vous lisez ne fonctionne pas. J'ai des images qui peuvent être dupliquées plusieurs fois au cours d'une page générée dynamiquement. Il est donc évident de le précharger et d’utiliser cette variable comme source à tout moment.

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

puis je règle l'image en utilisant

  document["pic1"].src = searchPic;

ou

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

Cependant, l'image n'est jamais correctement définie dans FireBug lorsque j'interroge l'image que je reçois [object HTMLImageElement] en tant que src de l'image.

Dans IE je reçois:

http://localhost:8080/work/Sandbox/jpmetrix/[object]
javascriptimagesrc
78
John

Vous devriez configurer la src en utilisant ceci:

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

ou

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

JavaScript pur à créer img balise et add attributes manuellement,

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

Définir src dans pic1

_document["#pic1"].src = searchPic.src;
_

ou avec getElementById

_document.getElementById("pic1").src= searchPic.src;
_

j-Query pour archiver cela,

_$("#pic1").attr("src", searchPic.src);
_
48
Jay Patel

Les instances du constructeur d'image ne sont pas destinées à être utilisées nulle part. Vous définissez simplement la src et les précharges de l'image ... et le tour est terminé. Vous pouvez rejeter l'objet et continuer.

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

est ce que vous devriez faire. Vous pouvez toujours utiliser le constructeur d'image et effectuer la deuxième action dans le gestionnaire onload de votre searchPic. Cela garantit que l'image est chargée avant de définir le paramètre src sur l'objet réel img.

Ainsi:

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
}
6
Breton

En outre, une façon de résoudre ce problème consiste à utiliser document.createElement et à créer votre code html img et à définir ses attributs de la manière suivante.

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

REMARQUE: Un point est que la communauté Javascript encourage actuellement les développeurs à utiliser des sélecteurs de documents tels que querySelector, getElementById et getElementsByClassName plutôt que le document ["pic1 "].

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

devrait marcher

2
Nir Levy

Vous n'avez pas besoin de construire une toute nouvelle image ... l'attribut src prend simplement une valeur de chaîne :-)

1
JorenB

Si vous utilisez WinJS , vous pouvez modifier les fonctions src par les fonctions Utilities.

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

Vous devez définir

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

Le searchPic lui-même est votre image (), vous devez lire le src que vous avez défini.

0
Mat Mannion

Votre propriété src est un objet car vous définissez l'élément src comme étant l'intégralité de l'image que vous avez créée en JavaScript.

Essayer

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

Hou la la! Quand vous utilisez src, alors src sur searchPic doit également être utilisé.

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

regarde mieux

0
Dewfy