如何使用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" />