從javascript對象中取出一個src img，並將其放入HTML

Question

我正在研究一個從數組中選取對象並將圖片顯示到div的程序。我怎麼能從一個物體上拍照並顯示它？我在想這樣的事情，但它似乎並不奏效。

var pizza = { 
crust: bread, 
topping: sauce, 
imgURL: 'www.pizza.com' 
} 

$('#mydiv').append(pizza.imgURL); 

Answer 1

你試過嗎？

$('#mydiv').append('<img src="' + pizza.imgURL + '"/>'); 

這在#myDiv附加圖像，並且將它根據你的比薩對象

Answer 2

在堅實的解決辦法是通過jQuery創建元素，設置圖像源的URL其src到pizza.imgURL，並將該元素傳遞給append()方法。這可以確保URL正確轉義（這不應該是一個問題，但它當然是可能的）。

這裏的a jsFiddle證明這個工作。但是，當然，圖片不會加載，因爲它不是有效的圖片網址。

var pizza = { 
    crust: bread, 
    topping: sauce, 
    imgURL: 'www.pizza.com' 
} 

$('#mydiv').append($('<img>').prop({ 
    src: imgURL, 
    // don't forget your alt attribute! 
    alt: 'pizza' 
}));