Bộ Javascript img src

Tôi có lẽ đang thiếu một cái gì đó đơn giản nhưng nó khá khó chịu khi mọi thứ bạn đọc không hoạt động. Tôi có những hình ảnh có thể được sao chép nhiều lần trong quá trình của một trang được tạo động. Vì vậy, điều hiển nhiên cần làm là tải trước nó và sử dụng một biến đó làm nguồn mọi lúc.

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

sau đó tôi đặt hình ảnh bằng cách sử dụng

  document["pic1"].src = searchPic;

hoặc là

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

Tuy nhiên, hình ảnh không bao giờ được đặt chính xác trong FireBug khi tôi truy vấn hình ảnh mà tôi nhận được [object HTMLImageElement]là srchình ảnh

Trong IE, tôi nhận được:

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

Bạn nên thiết lập src bằng cách sử dụng sau:

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

hoặc là

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

JavaScript thuần túy để tạo imgthẻ và add attributestheo cách thủ công,

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

Đặt src trong pic1

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

hoặc với getElementById

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

j-Truy vấn để lưu trữ cái này,

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

Các phiên bản của hàm tạo hình ảnh không được sử dụng ở bất cứ đâu. Bạn chỉ cần đặt src, và tải trước hình ảnh ... và thế là xong, chương trình kết thúc. Bạn có thể loại bỏ đối tượng và tiếp tục.

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

là những gì bạn nên làm. Bạn vẫn có thể sử dụng hàm tạo hình ảnh và thực hiện hành động thứ hai trong onloadtrình xử lý của bạn searchPic. Điều này đảm bảo hình ảnh được tải trước khi bạn đặt srctrên imgđối tượng thực .

Như vậy:

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
}

Ngoài ra, một cách để giải quyết vấn đề này là sử dụng document.createElementvà tạo html img của bạn và đặt các thuộc tính của nó như thế này.

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

LƯU Ý : Một điểm là cộng đồng Javascript ngay bây giờ khuyến khích các nhà phát triển để selectors tài liệu sử dụng như querySelector, getElementByIdvà getElementsByClassNamethay vì tài liệu [ "pic1"].

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

nên làm việc

Bạn không cần phải tạo một hình ảnh hoàn toàn mới ... thuộc tính src chỉ nhận một giá trị chuỗi :-)

Bạn cần đặt

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

Bản thân searchPic là Image () của bạn, bạn cần đọc src mà bạn đặt.

Thuộc tính src của bạn là một đối tượng bởi vì bạn đang đặt phần tử src là toàn bộ hình ảnh bạn đã tạo trong JavaScript.

Thử

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

Chà! khi bạn sử dụng srcthì srccủa searchPiccũng phải được sử dụng.

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

trông tốt hơn

Nếu bạn đang sử dụng WinJS, bạn có thể thay đổi srccác Utilitieschức năng.

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