如何在 Javascript HTML 文件中顯示圖像？

Question

我有來自https://github.com/huzaifsayed/coronabot-chatterbot的 index.html 頁面的這段代碼：

 function appendMessage(name, img, side, text) {
      //   Simple solution for small apps
      const msgHTML = `
<div class="msg ${side}-msg">
  <div class="msg-img" style="background-image: url(${img})"></div>

  <div class="msg-bubble">
    <div class="msg-info">
      <div class="msg-info-name">${name}</div>
      <div class="msg-info-time">${formatDate(new Date())}</div>
    </div>

    <div class="msg-text">${text}</div>
    
  </div>
</div>

Answer 1

應該在 url 周圍插入引號。 background-image 的語法是這樣的。

<div class="msg-img" style="background-image: url('paper.jpg')"></div>

因此，要在您的代碼中實現此語法，您需要用引號將插值部分括起來。 由於雙 qoutes 已經在使用，因此可以在 url 周圍使用單 qoutes。 嘗試這個 ：-

<div class="msg-img" style="background-image: url('${img}')"></div>