加载图片而不是链接?

时间:2014-12-04 09:20:32

标签: javascript jquery image

我一直在尝试不同的方法来加载图像,我试图从网址加载图像,但不是加载图像只是加载到地址的链接?我已经更新了下面的代码(只是加载卡片的部分)但是它仍然只加载链接而不是图像?谁能看到我哪里错了?

卡片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>

1 个答案:

答案 0 :(得分:2)

更改行

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

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