将 Javascript 变量发送到 HTML Img 源

发布于 2025-01-17 08:59:08 字数 1161 浏览 0 评论 0原文

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

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

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

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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寂寞清仓 2025-01-24 08:59:08

错误的呼叫以获取
分配任何地方
图像源未

Switch语句评估表达式，将表达式的值与案例子句匹配，并执行与该情况关联的语句，以及遵循匹配情况的案例中的语句。

你可能打算这样做

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

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

回复收藏 0 原文

遗弃Ｍ 2025-01-24 08:59:08

您可以使用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

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

回复收藏 0 原文

~没有更多了~