How do I get an image stored in a javascript variable, to display in an HTML code?

Question

Say for instance, my image is stored in a variable called flowers as seen in the below javascript code:

<script>
     var flowers = "myFlowers.gif";
</script>

In the following HTML code, I reference the flowers variable in my img src in order to display the image but cant seem to get this to work.

<img src= flowers  class="card-img-top" id="flowers">

Please help, What am I doing wrong?

Unless you're using some kind of special templating language... that markup will simply instruct the browser to set the image source to literally the string flowers, not the value of the variable. Use document.getElementById('flowers').src = flowers; — Terry
– Terry, Commented Jan 22, 2022 at 0:28

Kinglish · Accepted Answer · 2022-01-22 00:28:49Z

1

You can't insert it directly like that. Instead you set the attribute src through javascript.

let flowers = "https://picsum.photos/200/300";
document.querySelector('#flowers').src = flowers;

<img  class="card-img-top" id="flowers">

answered Jan 22, 2022 at 0:28

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1