如何将jQuery获取的图片宽高赋值给HTML中img标签的width与height属性

实现方法 #

你只需要修改现有JS逻辑，给目标img元素加个可识别的标识（比如ID），拿到宽高后直接赋值到对应属性即可，修改后的完整代码如下：

<script>
function getMeta(varA, varB) {
    if (typeof varB !== 'undefined') {
        // 选中页面上的目标图片元素
        const targetImg = document.getElementById('uploadedMapImg');
        // 给宽高属性赋值
        targetImg.width = varA;
        targetImg.height = varB;
        // 如果你用jQuery的话可以换成下面的写法
        // $('#uploadedMapImg').attr('width', varA).attr('height', varB);
    } else {
        var img = new Image();
        img.src = varA;
        img.onload = function () {
            getMeta(this.width, this.height);
        }
    }
}
getMeta("@image.Url()")
</script>

<img src="@image.Url()" id="uploadedMapImg" width="" height="" border="0" alt="@Model.Value("mapImage") mapImage" usemap="#Map" />

补充说明 #

• 赋值完成后，其他功能直接读取该img元素的width、height属性就能拿到正确的图片尺寸
• 如果页面上只有这一个使用了usemap="#Map"的图片，也可以用属性选择器选中元素，不需要额外加ID，写法为document.querySelector('img[usemap="#Map"]')
• 如果出现赋值失效的情况，可将JS代码放到页面末尾，确保DOM元素加载完成后再执行

内容的提问来源于stack exchange，提问作者user9047069