Search code examples
javascripthtmlimagesrc

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

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

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?

Solution

  • 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">