发送 Javascript 变量到 HTML 图片源

Question

我正在使用一段 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>

Answer 1

打错电话
图片来源没有在任何地方分配， img src=pictureURL是一厢情愿的想法
开关不返回值

switch 语句评估表达式，将表达式的值与 case 子句匹配，并执行与该 case 关联的语句，以及匹配 case 之后的 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">

Answer 2

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

发送 Javascript 变量到 HTML 图片源

问题描述

2 个解决方案

解决方案1
3 已采纳 2022-03-28 14:33:14

解决方案2
-1 2022-03-28 14:31:15

发送 Javascript 变量到 HTML 图片源

问题描述

2 个解决方案

解决方案1 3 已采纳 2022-03-28 14:33:14

解决方案2 -1 2022-03-28 14:31:15

解决方案1
3 已采纳 2022-03-28 14:33:14

解决方案2
-1 2022-03-28 14:31:15