加載圖片而不是鏈接？

Question

我一直在嘗試如何加載圖像的不同方法，我試圖從網址加載圖像，而不是加載圖像，只是加載鏈接到地址？我已經更新了下面的代碼（只是加載卡片的部分），但它仍然只加載鏈接而不是圖像？任何人都可以看到我要去哪裏錯了嗎？

卡JS（有超過2個卡，但在這個例子中，我只加了兩個）

GABIH20.cards = (function(){ 
var public_stuff = {}; 
var cards = [ 
{name: "Gabi H20", energy: 90, saving: 99, eco: 98, ease: 89, image: 'http://www.lessons4living.com/images/penclchk.gif'}, 
{name: "Sherlock H20lmes", energy: 30, saving: 70, eco: 35, ease: 60, image:'http://www.sherlock.com/images/penclchk.gif'}, 
]; 
var shuffle = function(v){ 
//This is just random code I plucked from the Internet. Seems to work for this purpose. 
for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x); 
return v; 
} 

public_stuff.get_cards = function() {return cards;} 

public_stuff.deal_hands = function() { 
var half_way_point = cards.length/2; 
var shuffled_deck = shuffle(cards); 
return [cards.slice(0, half_way_point), cards.slice(half_way_point)]; 
} 
return public_stuff; 
}()); 

事件JS

GABIH20 = {}; 

GABIH20.game = (function(){ 
var num_rounds_played_in_this_game = 0; 
var playing_game = false; 
var player, opponent, player_name; 

var public_stuff = {}; 

public_stuff.current_view = "#menu_view"; 

var populate_card_view = function(player) { 
var card = player.get_current_card(); 
$("header .distro_name").html(card.name); 
$(".attr_image .attr_imgvalue").html(card.image); 
$(".attr_energy .attr_value").html(card.energy); 
$(".attr_saving .attr_value").html(card.saving); 
$(".attr_eco .attr_value").html(card.eco); 
$(".attr_ease .attr_value").html(card.ease); 
} 

public_stuff.playing_game = function() { 
return playing_game; 
} 

public_stuff.get_player_name = function() { 
return player_name; 
} 

HTML

<div id="card_view" class="app_view"> 
<header> 
<p>You drew the <span class="distro_name">Ubuntu</span> card</p> 
</header> 
<div class="distro_info"> 
<table class="distro_attributes"> 
<tr class="distro_attribute attr_image"> 
<td class="attr_imgvalue"><img src="" class="card_image" /></td> 
</tr> 
</table> 
</div> 
<p><strong>Now choose an attribute to battle with!</strong></p> 
<table class="distro_attributes"> 
<tr class="distro_attribute attr_energy"> 
<td class="attr_name">Energy</td> 
<td class="attr_value">100</td> 
</tr> 
<tr class="distro_attribute attr_saving"> 
<td class="attr_name">Saving</td> 
<td class="attr_value">100</td> 
</tr> 
<tr class="distro_attribute attr_eco"> 
<td class="attr_name">Eco</td> 
<td class="attr_value">100</td> 
</tr> 
<tr class="distro_attribute attr_ease"> 
<td class="attr_name">Ease</td> 
<td class="attr_value">100</td> 
</tr> 
</table></div> 

Answer 1

改線，

$(".attr_image .attr_imgvalue").html(card.image); 

到

$(".attr_image .attr_imgvalue img").attr('src',card.image); // add link to img src