如何使用JavaScript向图像URL添加参数

Question

我可以将图像以指定的宽度和高度嵌入到页面中（例如： <img src="image.php?w=100&h=100"> ）

我想根据设备屏幕宽度加载不同的图像尺寸：对于小于600px的屏幕宽度为100x100，在其他情况下为200x200。 据我了解，php对用户屏幕一无所知，因此我必须使用JS。

这不起作用：

<img src="image.php?<script>document.write('w=100&h=100')</script>">

那工作：

<script>document.write('<img src="image.php?w=100&h=100">')</script>

这是正确的方法吗？ 我应该考虑任何后果吗？

Answer 1

您可以使用该代码。 但是我认为第二种方法是更改​​服务器端图像的src。

 function addParams(w, h) { var img = document.querySelectorAll("img.withParams"); for (var i = 0; i < img.length; i++) { img[i].src = img[i].src + "?w=" + w + "&h=" + h; } } window.addEventListener("load", function () { addParams(10, 10); }) 

 <img class="withParams" src="img.php"/> <img src="img.php" /> <img class="withParams" src="img.php" />