如何在HTML/JavaScript中根据变量名链接本地扑克牌图片？

问题 #

我有一个存放扑克牌图片的本地文件夹，每张牌对应一张图片，命名规则如下：

2_of_clubs.png
2_of_diamond.png
2_of_hearts.png
2_of_spades.png
3_of_clubs.png
...

图片文件夹与HTML、CSS、JS文件所在的程序文件夹同级，可通过/Cards images/jack_of_clubs.png引用梅花J的图片。

现在我用了一个随机卡牌生成器函数，需要根据函数返回的结果加载并显示对应的图片。函数代码如下：

//Returns a random card as an object with ranking and suit as attributes
function Random_Card_Generator(){
    card_rankings = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King", "Ace"]
    card_suits = ["spades", "clubs", "hearts", "dimond"]
    Random_Card = {ranking: card_rankings[Math.floor(Math.random()*13)], suit: card_suits[Math.floor(Math.random()*4)]}
    return Random_Card
}

请问如何根据该函数的结果打开对应的图片？

解决方案 #

1. 修正函数拼写问题 #

首先注意到函数里的dimond是拼写错误，正确应为diamond，否则生成的文件名会和实际图片不匹配。同时建议用const声明变量，避免全局变量污染：

function Random_Card_Generator(){
    const card_rankings = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King", "Ace"];
    const card_suits = ["spades", "clubs", "hearts", "diamond"]; // 修正拼写错误
    const randomCard = {
        ranking: card_rankings[Math.floor(Math.random()*13)],
        suit: card_suits[Math.floor(Math.random()*4)]
    };
    return randomCard;
}

2. 生成匹配的图片路径 #

根据图片命名规则（[小写排名]_of_[小写花色].png）和你的引用路径，把函数返回的对象转换成对应的图片URL：

function getCardImageData() {
    const card = Random_Card_Generator();
    // 将排名和花色转为小写，匹配文件名格式
    const rankingLower = card.ranking.toLowerCase();
    const suitLower = card.suit.toLowerCase();
    // 拼接完整图片路径
    const imageUrl = `/Cards images/${rankingLower}_of_${suitLower}.png`;
    // 返回卡牌信息和图片路径，避免重复调用随机函数
    return { card, imageUrl };
}

3. 在页面中显示图片 #

有两种常用方式实现图片显示：

方式一：动态创建img元素插入页面

如果页面没有预设的图片容器，可动态创建并插入：

const { card, imageUrl } = getCardImageData();
// 创建img元素
const cardImg = document.createElement('img');
cardImg.src = imageUrl;
cardImg.alt = `${card.ranking} of ${card.suit}`; // 设置替代文本提升可访问性
// 将图片插入到页面指定容器，比如id为card-container的元素
document.getElementById('card-container').appendChild(cardImg);

方式二：更新已有img元素的src属性

如果页面已经有用于显示卡牌的img标签（比如<img id="random-card" alt="Random playing card">），直接更新它的属性即可：

const { card, imageUrl } = getCardImageData();
const cardImg = document.getElementById('random-card');
cardImg.src = imageUrl;
cardImg.alt = `${card.ranking} of ${card.suit}`;

内容的提问来源于stack exchange，提问作者Danila