HTML: image name as url parameter does not work?

Question

I have a HTML page which that using an image name as URL parameter. Why doesn't show the image, what do i wrong?

<!DOCTYPE html>
<html lang="nl">
<head>
    <script src="lib/functions.js"></script>
</head>


<body>

<!-- test03.html?parameter=mountains.jpg -->

<img src="" id="imagename">

<script>
    const queryString = window.location.search;
    const urlParameters = new URLSearchParams(queryString);
    const Parameter = urlParameters.get('parameter');
    document.getElementById("imagename").innerHTML = Parameter;
</script>

</body>

</html>

Which bit doesn't work? Do you get any errors in the console? The last line of your script looks wrong at first glance, probably want to explicitly set the SRC of the image. — MikeB
– MikeB, Commented Mar 13 at 10:40

Bogdan · Accepted Answer · 2025-03-13 10:46:34Z

3

You don't see your picture because you changed innerHTML, and it has nothing to do with the image's source for img HTML tag.

The right way is document.getElementById("imagename").src = Parameter instead of document.getElementById("imagename").innerHTML = Parameter for this scenario.

Make sure you have this image and the image path is correct.

answered Mar 13 at 10:46

Bogdan

864 bronze badges

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

1 Comment

Aventurijn Mar 13 at 11:16

Great, thank you so much! It works!

Spectric · Accepted Answer · 2025-03-16 02:17:13Z

0

I have an alternative solution that could work depending on the use case. I use the hash of the URL to decide what image to show.

div.image {
  display: none;
}

div:target {
  display: block;
}

<ul class="menu">
  <li><a href="#image01">Image01</a></li>
  <li><a href="#image02">Image02</a></li>
</ul>

<div class="image" id="image01">
  <img src="https://placehold.co/200x150/orange/white">
</div>
<div class="image" id="image02">
  <img src="https://placehold.co/200x150/tomato/white">
</div>

edited Mar 16 at 2:17

Spectric

32.6k6 gold badges32 silver badges56 bronze badges

answered Mar 13 at 16:36

chrwahl

14.1k2 gold badges25 silver badges40 bronze badges

Collectives™ on Stack Overflow

HTML: image name as url parameter does not work?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related