CODEWITHSUNDEEP
javascripthtmlimage
user8209791
user8209791

Reputation:

How can I display an image involving a JavaScript variable

I have a table and in one of the cells I want to display an image.

The user enters a number using prompt() and I want the number they enter to form part of the image URL.

How/where do I display the image URL in this code?

<td><script>

    var userID = prompt("Enter the ID of the user you want to search for.");

    var userImage = "https://storage.brick-hill.com/images/avatars/" + userID + ".png";

</script></td>

Upvotes: 0

Views: 4738

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65808

You have two choices for placing the image:

  1. Have an <img> element (that hasn't had its src configured yet and is set, by default, to be intially hidden) already present in the HTML, but don't display it until the image path has been established by the JavaScript and the image has been completely downloaded by the client (this ensures users don't see a partial image).

var userID = prompt("Enter the ID of the user you want to search for. \nFor this test, enter 169");

// Get a reference to the placeholder:
var placeholder = document.getElementById("placeholder");

// Set up a load event handler that will unhide the image once its loaded
placeholder.addEventListener("load", function(){
  this.classList.remove("hidden");
});

// Update the source of that image (which will cause the load event to trigger)
placeholder.src = "http://i2.cdn.cnn.com/cnnnext/dam/assets/150409124320-20-cnnphotos-hubble-restricted-super-" + userID + ".jpg";
.hidden {display:none;}
img { width:200px; }
<table>
  <tr>
    <td>
      <img id="placeholder" class="hidden">
    </td>
  </tr>
</table>

  1. Insert a dynamically created image at the spot in the page where you need it.

var userID = prompt("Enter the ID of the user you want to search for. \nFor this test, enter 169");

// Get a reference to the placeholder:
var placeholder = document.getElementById("placeholder");

// Dynamically create and configure the new image
var img = document.createElement("img");

img.classList.add("hidden");

// Set up a load event handler that will unhide the image once its loaded
img.addEventListener("load", function(){
  this.classList.remove("hidden");
});

// Inject the image into the document
placeholder.appendChild(img);

// Update the source of that image (which will cause the load event to trigger)
img.src = "http://i2.cdn.cnn.com/cnnnext/dam/assets/150409124320-20-cnnphotos-hubble-restricted-super-" + userID + ".jpg";
.hidden {display:none;}
img { width:200px; }
<table>
  <tr>
    <td id="placeholder"></td>
  </tr>
</table>

With either of these approaches, you need the script to run after the page has loaded, so simply place the <script> element just before the end of the body (</body>). This is better than injecting the script into the middle of the page where you actually want the image. It keeps the script separate from the HTML.

Upvotes: 0

Prags
Prags

Reputation: 811

<td id="img1></td>

<script>

var userID = prompt("Enter the ID of the user you want to search for.");

var userImage = "https://storage.brick-hill.com/images/avatars/" + userID + ".png";

document.getElementById("img1").innerHTML="<img src='+userImage+'>"

</script>

you have assign Id for the table columns and write a function to display images on their appropriate rows.

Hope this helps..!

Upvotes: 1

Related Questions