Javascript set img src

Muhtemelen basit bir şeyi kaçırıyorum ama okuduğunuz her şeyin işe yaramaması oldukça sinir bozucu. Dinamik olarak oluşturulmuş bir sayfa boyunca birçok kez kopyalanabilen resimlerim var. Yani yapılacak en bariz şey, onu önceden yüklemek ve bu değişkeni her zaman kaynak olarak kullanmaktır.

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

sonra görüntüyü kullanarak

  document["pic1"].src = searchPic;

veya

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

Ben olsun görüntüyü sorguladığınızda Ancak resim FireBug düzgün ayarlanmış asla [object HTMLImageElement]olarak srcgörüntünün

IE'de şunları alırım:

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

Src'yi şunu kullanarak ayarlamalısınız:

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

veya

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

imgEtiket oluşturmak ve add attributesmanuel olarak yapmak için saf JavaScript ,

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

Src'yi ayarlayın pic1

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

veya getElementById ile

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

j-Bunu arşivlemek için sorgu,

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

Görüntü oluşturucunun örneklerinin herhangi bir yerde kullanılması amaçlanmamıştır. Basitçe src, ve görüntü önyüklerini ayarlayın ... ve işte bu, gösteri bitti. Nesneyi atabilir ve devam edebilirsiniz.

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

yapmanız gereken şey. Hala görüntü yapıcı kullanın ve ikinci eylemi gerçekleştirebilir onload, aramalarınızdan işleyicisi searchPic. Bu src, gerçek imgnesneyi ayarlamadan önce görüntünün yüklenmesini sağlar .

Şöyle:

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
}

Ayrıca, bunu çözmenin bir yolu document.createElement, html img'nizi kullanmak ve oluşturmak ve özniteliklerini bu şekilde ayarlamaktır.

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

HATIRLATMA : Bir nokta JavaScript toplulukta şu anda gibi kullanım belge seçicileri teşvik eder ki querySelector, getElementByIdve getElementsByClassNameyerine belge daha [ "Pic1"].

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

çalışmalı

Tamamen yeni bir görüntü oluşturmanıza gerek yok ... src özelliği yalnızca bir dize değeri alır :-)

Ayarlaman gerekiyor

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

SearchPic'in kendisi Resminizdir (), ayarladığınız src'yi okumanız gerekir.

Src mülkünüz bir nesnedir çünkü src öğesini JavaScript'te oluşturduğunuz görüntünün tamamı olacak şekilde ayarlıyorsunuz.

Deneyin

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

Vaov! kullandığınızda srcdaha sonra srcbir searchPicde kullanılmalıdır.

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

daha iyi görünüyor

WinJS kullanıyorsanız src, Utilitiesişlevler aracılığıyla değiştirebilirsiniz .

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