加载图像而不是链接
Load Image Instead of link?
我一直在尝试如何加载图像的不同方法,我试图从网址加载图像,但不是加载图像,而是加载指向地址的链接?我已经更新了下面的代码(只是加载卡片的部分),但它仍然只加载链接而不是图像?谁能看出我哪里出了问题?
card 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>
更改行,
$(".attr_image .attr_imgvalue").html(card.image);
自
$(".attr_image .attr_imgvalue img").attr('src',card.image); // add link to img src
相关文章:
- 如果显示当前图像,则禁用链接
- Javascript图像链接
- 更改标记.js图像/链接表达式
- 如何使用javascript从文件夹中获取图像并发布直接链接
- 当页面包含指向一个图像的多个链接时,fancyBox会复制缩略图辅助图像
- PNG图像被覆盖,但每个图像都有一个链接可以更改,每次一个-Javascript/jQuery/CSS
- javascript 将 IMG 标签中的图像转换为 标签中的实际链接图像
- 一键在一个窗口中打开两个不同的链接图像
- 如何使用 jquery 调整超链接图像的大小
- 重写:导航链接图像按钮效果
- 切片盒,链接图像
- 悬停时更改链接图像
- 在Javascript中使用href=mailto链接图像
- 鼠标悬停时链接图像
- 链接图像到网页链接
- 超链接图像不显示Chrome扩展
- 基于ALT标签的链接图像
- 在基于活动链接图像的导航中改变背景位置
- 将文本和超链接图像添加到表格单元格
- 如何在此代码片段中定位链接图像而不是链接文本