将 Javascript 变量发送到 HTML 图片源

Question

我正在使用一段 JavaScript 代码来更改 WordPress 网站上的图像源（利用 Elementor 编辑器），这是基于单击按钮用特定字符串更新 URL .例如，此过程将产生以下结果：

点击后： www.website.com/acoolpage/?picture=ws10m

此 HTML 构造函数创建图像的维度，但 不会更新 按钮单击后具有所需结果的图像源，当 URL 切换到 www.website.com/acoolpage/?picture=ws10m。需要哪些额外步骤 and/or 编辑？谢谢！

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>

Answer 1

您可以使用 locationchange 事件检测 URL 是否已通过单击按钮更改。

代码如下：

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

Answer 2

get 调用错误
图源未赋任何地方，img src=pictureURL 一厢情愿
switch 没有 return 值

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.

您可能有意这样做

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

更多版本的替代

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

将 Javascript 变量发送到 HTML 图片源

Send Javascript Variable to HTML Img Source

html

javascript

image

elementor