Javascript ตั้งค่า img src

ฉันอาจจะพลาดอะไรง่ายๆ แต่มันค่อนข้างน่ารำคาญเมื่อทุกสิ่งที่คุณอ่านไม่ได้ผล ฉันมีภาพที่อาจซ้ำกันหลายครั้งในหน้าที่สร้างขึ้นแบบไดนามิก ดังนั้นสิ่งที่ต้องทำอย่างชัดเจนคือการโหลดล่วงหน้าและใช้ตัวแปรหนึ่งตัวนั้นเป็นแหล่งที่มาตลอดเวลา

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

จากนั้นฉันตั้งค่าภาพโดยใช้

  document["pic1"].src = searchPic;

หรือ

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

อย่างไรก็ตามรูปภาพไม่เคยตั้งค่าอย่างถูกต้องใน FireBug เมื่อฉันค้นหารูปภาพที่ฉันได้รับ[object HTMLImageElement]เป็นsrcของรูปภาพ

ใน IE ฉันได้รับ:

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

คุณควรตั้งค่า src โดยใช้สิ่งนี้:

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

หรือ

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

JavaScript บริสุทธิ์เพื่อสร้างimgแท็กและadd attributesด้วยตนเอง

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 ใน pic1

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

หรือด้วย getElementById

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

j-Query เพื่อเก็บสิ่งนี้

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

อินสแตนซ์ของตัวสร้างรูปภาพไม่ได้ถูกนำมาใช้ที่ใดก็ได้ คุณเพียงแค่ตั้งค่าsrcและโหลดรูปภาพล่วงหน้า ... เท่านี้ก็จบการแสดงแล้ว คุณสามารถทิ้งวัตถุและไปต่อได้

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

คือสิ่งที่คุณควรทำ คุณยังคงสามารถใช้ตัวสร้างรูปภาพและดำเนินการที่สองในonloadตัวจัดการsearchPicไฟล์. เพื่อให้แน่ใจว่าภาพจะถูกโหลดก่อนที่คุณจะตั้งค่าsrcบนimgวัตถุจริง

ชอบมาก:

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
}

นอกจากนี้วิธีหนึ่งในการแก้ปัญหานี้คือการใช้document.createElementและสร้าง html imgของคุณและตั้งค่าแอตทริบิวต์เช่นนี้

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

หมายเหตุ : หนึ่งจุดคือชุมชนจาวาสคริปต์ในขณะนี้กระตุ้นให้นักพัฒนาสามารถใช้เอกสารเตอร์เช่นquerySelector, getElementByIdและgetElementsByClassNameมากกว่าเอกสาร [ "pic1"]

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

ควรทำงาน

คุณไม่จำเป็นต้องสร้างภาพใหม่ทั้งหมด ... แอตทริบิวต์ src ใช้ค่าสตริง :-)

คุณต้องตั้งค่า

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

searchPic เองก็คือ Image () ของคุณคุณต้องอ่าน src ที่คุณตั้งไว้

คุณสมบัติ src ของคุณเป็นออบเจ็กต์เนื่องจากคุณกำลังตั้งค่าองค์ประกอบ src เป็นรูปภาพทั้งหมดที่คุณสร้างใน JavaScript

ลอง

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

ว้าว! เมื่อคุณใช้srcแล้วsrcของsearchPicต้องใช้ยัง

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

ดูดีขึ้น

หากคุณใช้WinJSคุณสามารถเปลี่ยนsrcผ่านUtilitiesฟังก์ชันต่างๆ

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