從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中，並根據您的披薩對象將其設置為image-source-url

Answer 2

一個可靠的解決方案是通過jQuery創建元素，將其src設置為pizza.imgURL ，並將該元素傳遞給append()方法。 這樣可以確保正確地對URL進行轉義（這應該不是問題，但肯定是可能的）。

這是一個jsFiddle來證明這可行 。 但是，當然，圖像不會加載，因為它不是有效的圖像URL。

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

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