我一直在尝试用Firebase数据库中的JSON数据制作一些CSS卡。主要的想法是使用来自Firebase的数据，我试图建立从一个表格的每个提交CSS卡。

在表单提交过程中，用户选择表单所属类别，并在CSS卡片中显示特定的图像。

随着CSS卡的动态创建，整个HTML代码都是使用JS构建的。

首先，这是从Firebase获取数据并调用函数创建CSS卡的代码。

  let reference = firebase.database().ref("data-block");
  reference.on("value",gotData);

现在检查创建CSS卡的函数。

function gotData(data){
  let x = data.val();
  let keys = Object.keys(x);
console.log(keys.length);
var q=0;
  for( let i=0;i<keys.length;i++){

    let a =keys[i];

    let title_a = expens[a].Entry;
    let category_a=expens[a].Category;

    console.log(title_a,category_a);
    
    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=""/>
            </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">Author</div>
                ${category_a}
            </div>

        
        </article>
        
    `  
}

正如您所看到的，图像的src没有声明，因为我不知道如何根据从数据库获取的类别分配不同的图像

我有3张像

shopping.png
food.png
learn.png

帮助我如何根据来自FireBase的数据为图像标记动态分配src。