1

I want to display an image on screen, but define the link to the image in my js script, like so:

 <script>
    function myFunction() {
    var imgUrl = "https://www.linkpicture.com/q/IMG_4902"
    var modelName = "Model Name"
    document.getElementById("myText").innerHTML = modelName;
    
    }
    </script>
<body onload="myFunction()">
<div class="image-area">
        <div class="img-wrapper">
            <img src="" id="myImg" alt="">

so in the img src, I want to display the image based on the imgUrl content in my script. How is this possible?

Improve this question

3 Answers 3

Reset to default
2

You can modify the source of the image by assigning a new value to the src property.

<script>
  function myFunction() {
    var imgUrl = "https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1"
    var modelName = "Model Name"
    //   document.getElementById("myText").innerHTML = modelName;
    document.getElementById("myImg").src = imgUrl;
  }
</script>

<body onload="myFunction()">
  <div class="image-area">
    <div class="img-wrapper">
      <img src="" id="myImg" alt="">
    </div>
  </div>
</body>

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

Comments

1

Very strange question...this doesn't work for some reason?

document.getElemetnById("myImg").src = imgUrl;
Improve this answer

Comments

1

You can do something like this

let myImg=document.querySelector('#myImg');
let imgUrl = "https://www.linkpicture.com/q/IMG_4902";
myImg.src=imgUrl
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.