如何使用jQuery或JS更改img src onclick

Question

我有多个带有src URL的图像，它们都有

....content/..._gal6.jpg?format=100w

如何使用jQuery或JS将所有URL更改为以结尾

?format=2500w

点击？

Answer 1

像这个

document.querySelectorAll("img").forEach(img => {
const url = new URL(img.src);
if (url.searchParams.get("format")) {
url.searchParams.set("format", "2500w")
console.log(url.toString())
img.src = url.toString()
}  
})

<img src="bla.jpg?format=250w">
<img src="bla.jpg">
<img src="bla.jpg?format=350w">

Answer 2

使用Javascript：

更改图像的src属性：

function changeImage(){
document.getElementById('test-image').src = "https://url-to-second-image.com/image.png";
}

您可以使用html:中的点击事件调用该函数

<img id="test-image" src="the-url/first_image.jpg" onclick="changeImage()">

这是一个jsfiddle：https://jsfiddle.net/f5mwext3/2/

同样的方式，你可以只更改部分名称(为了方便，我使用整个外部文件(