CODEWITHSUNDEEP
javascriptpythonhtmlcss
Dr Bean
Dr Bean

Reputation: 25

How to i display an Image in a Javascript HTML file?

I have this code from the index.html page from https://github.com/huzaifsayed/coronabot-chatterbot:

 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>

Upvotes: 0

Views: 157

Answers (1)

abhinum95
abhinum95

Reputation: 69

Qoutes should be inserted around url. The syntax for background-image is like this.

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

So, to achieve this syntax in your code you need to surround the interpolation part with quotes. Since double qoutes are already in use, single qoutes can be used around the url. Try this :-

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

Upvotes: 1

Related Questions