如何用JavaScript添加参数到图像url

How to add parameter to image url with JavaScript

本文关键字：图像 url 参数 添加 何用 JavaScript      更新时间：2023-09-26

我可以在我的页面上嵌入图像与指定的宽度和高度(像这样:<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>

这样做是正确的吗?有什么后果需要我考虑吗?

您可以使用该代码。但是我认为最好的方法是在服务器端更改图像的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" />

相关文章：