0

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>
Dr Bean
  • 25
  • 5

1 Answers1

1

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>

abhinum95
  • 69
  • 4
  • Thanks for the suggestion i will try it – Dr Bean Nov 24 '20 at 06:56
  • This is from https://github.com/hcollins345/quote-therapist – Dr Bean Nov 24 '20 at 07:09
  • Hi it worked! however i can only seem to display flaticon Images. When i use images pasted from other urls (such as flickr) it just shows a grey circle. Do i need to create a new CSS styling class? – Dr Bean Nov 24 '20 at 09:14
  • Hi, can you please post a screenshot of the behavior. Also in browser network tab, you can check if the get request for the image failed. You can inspect the image in browser and try to edit the css there. If that solves the problem, assign a custom css class to the image and add appropriate css there. In the code above the image is already having a msg-img tag, so checking css for that class might help as well. – abhinum95 Nov 24 '20 at 09:33
  • Hi i managed to solve it using , however i want to pass a variable which is image's link to to this javascript function – Dr Bean Nov 25 '20 at 09:55
  • function appendMessage(name, img, side, text, img2) { // Simple solution for small apps const msgHTML = `
    ${name}
    ${formatDate(new Date())}
    ${text}
    `;     – Dr Bean Nov 25 '20 at 09:56