Send Javascript Variable to HTML Img Source

Question

I am utilizing a piece of JavaScript code to change image sources on a WordPress website (leveraging the Elementor editor), which is based on a button click updating the URL with a specific string. For example, this process would yield the following:

Before Click: www.website.com/acoolpage/

After Click: www.website.com/acoolpage/?picture=ws10m

This HTML constructor creates the dimension of the image, but does not update the image source with the desired result after the button click, when the URL switches to www.website.com/acoolpage/?picture=ws10m. What additional steps and/or edits are required? Thanks!

const urlParams = new URLSearchParams(window.location.search);
const pictureParam = urlParams.get('?picture=')

const pictureUrl =
  switch (pictureParam) {
    case 'ws10m':
      return 'https://www.website.com/graphics/image_ws10m.png'
      break

    default:
      return 'https://www.website.com/graphics/image_t2m.png'
      break
  }

<body>
  <img src=pictureURL alt="Test" width="1920" height="1080">
</body>

urlParams.get() doesn't require you to include the ? and =. See docs — StackByMe
– StackByMe, Commented Mar 28, 2022 at 14:28
Also switch does not return anything and you are not assigning the url to the image srd anywhere — mplungjan
– mplungjan, Commented Mar 28, 2022 at 14:30
Your code throws an error (as seen above). Does this occur in your live situation? — isherwood
– isherwood, Commented Mar 28, 2022 at 14:30
@isherwood The code does throw an error (image does not return) but oddly doesn't blow up the entire page. I can confirm this in the live situation. — TornadoEric
– TornadoEric, Commented Mar 28, 2022 at 14:37

mplungjan · Accepted Answer · 2022-03-28 15:00:53Z

3

Wrong call to get
image source is not assigned anywhere, img src=pictureURL is wishful thinking
switch does not return a value

The switch statement evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case, as well as statements in cases that follow the matching case.

You likely meant to do this

window.addEventListener("DOMContentLoaded", function() {
  const urlParams = new URLSearchParams(window.location.search);
  const pictureParam = urlParams.get('picture')
  document.getElementById("img").src = `https://www.website.com/graphics/image_${pictureParam ===  'ws10m' ? 'ws10m.png' : 't2m.png'}`
})

<img src="" id="img" alt="Test" width="1920" height="1080">

Alternative for more versions

window.addEventListener("DOMContentLoaded", function() {
  const urlParams = new URLSearchParams(window.location.search);
  const pictureParam = urlParams.get('picture');
  document.getElementById("img").src = `https://www.website.com/graphics/image_${pictureParam ? pictureParam  :  'default.png'}`
})

<img src="" id="img" alt="Test" width="1920" height="1080">

edited Mar 28, 2022 at 15:00

answered Mar 28, 2022 at 14:33

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

3 Comments

TornadoEric Over a year ago

Appreciate the guidance here! A follow-up question for this edit, if I have different URL string variables (besides 'ws10m') that can be passed, say 'var1', 'var2', 'varx', is there a recommend way to write the code to handle multiple under document.getElementById("img").src = pictureParam ===?

mplungjan Over a year ago

See updated script. I suggest a default image and then just use the pictureParam if it is there

TornadoEric Over a year ago

I've deployed this and found this code alteration works exactly as desired, thank you for your prompt help. I will accept your answer!

Misfits09 · Accepted Answer · 2022-03-28 14:31:15Z

-1

You can use the locationchange event to detect if the URL has been changed by a button click.

The code is as follows :

const obj = document.getElementById('#IDFromDOM');

function updateImage(){

  const urlParams = new URLSearchParams(window.location.search);
  const pictureParam = urlParams.get('picture')

  const pictureUrl = pictureParam === 'ws10m' ? 'https://www.website.com/graphics/image_ws10m.png' : 'https://www.website.com/graphics/image_t2m.png'
  
  obj.src = pictureUrl;
}
window.addEventListener('locationchange', updateImage);
updateImage(); //Fire a first time on page load

answered Mar 28, 2022 at 14:31

Misfits09

1961 silver badge9 bronze badges

Collectives™ on Stack Overflow

Send Javascript Variable to HTML Img Source

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related