在js中更改img的来源并获得0的宽度？

Posted 2023-05-09

【中文标题】在js中更改img的来源并获得0的宽度？

【英文标题】：Changing source of img in js and get 0 for width?

【发布时间】：2021-05-05 00:30:43

【问题描述】：

我目前正在尝试使用 jquery 设置图像 html 标记的来源，然后获取图像的高度和宽度。但是，当尝试使用以下代码执行此操作时，我得到的 width 为 0 并且与 height 相同：

$(document).ready(function() 
    
    $("#image").attr("src", "https://via.placeholder.com/600x160.png?text=Testing Image");
    console.log($("#image").width());
    
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
    <img id="image" />
</div>

我正在尝试这样做是为了更改同一 HTML 标记的图像 src 并获得新的宽度和高度。

我发现这是由于图像未加载到 DOM 中，所以我尝试了一些我在互联网上找到的东西作为以下两个 sn-ps，但结果相同，宽度为 0，高度为 0：

$(document).ready(function() 
    
    $(`<img id='image' src='$"https://via.placeholder.com/600x160.png?text=Testing Image"'>`).appendTo('#container');
    console.log($("#image").width());
    
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
</div>

$(document).ready(function() 
    
    let image = new Image();
    image.src = "https://via.placeholder.com/600x160.png?text=Testing Image";
    image.id = "image";
    $('#container').append(image);
    console.log($("#image").width());
    
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
</div>

我不知道您是否能理解我的需求，但我非常感谢那里的帮助。

提前致谢。

【参考方案1】：

您应该使用load 事件，以便等到图像加载并显示出来

参见下面的 sn-p ：

使用 Jquery：

$(document).ready(function() 
    var $image = $("#image");
    $image.attr("src", "https://via.placeholder.com/600x160.png?text=Testing Image");
    $image.on("load", function() 
        console.log($(this).width(),"X",$(this).height());
    )
    
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
    <img id="image" />
</div>

使用纯js：

    let image = new Image();
    image.src = "https://via.placeholder.com/600x160.png?text=Testing Image";
    image.id = "image";
    
    image.addEventListener("load", function(event) 
      console.log(this.width ,"x",this.height)
    );
    
    let container = document.getElementById("container")
    
    container.appendChild(image);

<div id="container" ></div>

【参考方案2】：

你需要监听图片的onload事件监听器：

const img = new Image();

img.setAttribute('src', 'https://via.placeholder.com/150');
console.log('img width before load', img.width);

img.addEventListener('load', () => console.log('img width after load', img.width));

document.body.appendChild(img);