如何基于Firebase数据库的JSON数据动态设置CSS卡片中图片的src属性

很简单就能解决这个问题，核心思路是建立类别名称和对应图片的映射关系，这样就能根据从Firebase拿到的category_a值，直接匹配到对应的图片路径。

步骤1：创建类别-图片映射 #

先定义一个对象，把数据库里可能出现的类别名称和对应的图片文件名一一对应起来，后续维护也方便，新增类别只需要加一行就行：

// 这里的键要和你数据库里Category字段的实际值完全匹配，比如如果是英文"Shopping"就写"Shopping"
const categoryImageMap = {
  "购物": "shopping.png",
  "美食": "food.png",
  "学习": "learn.png"
};

步骤2：修改卡片模板，动态绑定图片路径 #

在生成卡片的模板字符串里，把img标签的src属性替换成从映射里获取的路径，同时可以加个默认图片（比如default.png），防止出现未匹配到的类别。

另外注意你原代码里的一个小错误：let title_a = expens[a].Entry;这里的expens应该是x（因为x = data.val()），不然会找不到数据哦。

修改后的完整gotData函数如下：

function gotData(data) {
  let x = data.val();
  let keys = Object.keys(x);
  console.log(keys.length);
  
  // 定义类别-图片映射
  const categoryImageMap = {
    "购物": "shopping.png",
    "美食": "food.png",
    "学习": "learn.png"
    // 可以继续添加更多类别和对应的图片
  };

  for (let i = 0; i < keys.length; i++) {
    let a = keys[i];
    let title_a = x[a].Entry; // 修正原代码里的expens为x
    let category_a = x[a].Category;
    console.log(title_a, category_a);
    
    // 获取对应图片，没有匹配到就用默认图
    const imgSrc = categoryImageMap[category_a] || "default.png";
    
    let expense = document.querySelector(".card-list");
    expense.innerHTML += `
      <article class="card">
        <header class="card-header">
          <h2>${title_a} </h2>
        </header>
        <div class="card-author">
          <a class="author-avatar" href="#">
            <img id="x" src="${imgSrc}" alt="${category_a}"/>
          </a>
          <svg class="half-circle" viewBox="0 0 106 57">
            <path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
          </svg>
          <div class="author-name">
            <div class="author-name-prefix">Category</div> <!-- 原代码写的Author，改成Category更贴合语义 -->
            ${category_a}
          </div>
        </div>
      </article>
    `;
  }
}

额外小建议 #

1. 给图片加个alt属性，既符合语义化规范，也能在图片加载失败时显示提示内容。
2. 如果后续类别较多或需要动态更新图片，这个映射对象可以单独抽出来维护，甚至存在Firebase里，不用改代码就能更新。

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