javascript - 如何使用 querySelector 设置图像

Question

在我的 javascript 代码中，我使用 querySelector 将一些数据设置为我拥有的几个跨度标签。例如，我有一个如下所示的innerHTML。

this.innerHTML = `

            <div id="templates" class="template_style">

              <template id="book-template">
              <div class="card_component">
              <!--<img class="user_image" src="user_image"/>-->
                <span class="firstName"></span><span class="lastName"></span><span class="category"></span>
                </div>
              </template>

              <template id="book-template2">
              <div class="card_component">
                <span class="balance"></span><span class="bank"></span><span class="description"></span>
                </div>
              </template>

             <div id="books"></div>
           </div>
       `;

我将数据设置为 <span class="firstName">喜欢 instance.querySelector('.firstName').innerHTML = book.firstName;

如何对图像标签执行相同的操作？

<img class="user_image"/>
instance.querySelector('.user_image').innerHTML = book.picture;

这不起作用。如何使用 querySelector 将我的图像设置为图像标签的 src？

Answer 1

您可以按如下方式设置 src 属性:

instance.querySelector('.user_image').src = book.picture;