javascript - 使用Vue获取img currentSrc

基本上，我有一个img元素，看起来像这样：

<img
     ref="primaryImg"
     id="primary-img"
     class="profile-img"
     sizes="(max-width: 1920px) 80vw,
     (max-width: 1440px) 70vw,
     (max-width: 1280px) 60vw,
     (max-width: 1020px) 50vw,
     (max-width: 900px) 40vw,
     (max-width: 800px) 30vw,
     (max-width: 600px) 20vw,
     (max-width: 400px) 10vw,
     80vw"
     :srcset="profile.photos.primary._srcset"
     alt="">

srcset包含要使用的不同URL，具体取决于用户的设备视口。

为了访问元素的属性，我使用了Vue的this.$refs。

在mounted()上，我尝试console.dir(this.$refs.primaryImg)。

mounted() {
    console.dir(this.$refs.primaryImg);
},

它确实在浏览器的控制台上显示了currentSrc



但是，当我尝试这样做时

console.dir(this.$refs.primaryImg.currentSrc);

它返回一个空字符串。我认为这必须是生命周期问题，此时img src可能未初始化。如何获得currentSrc？

最佳答案

当您尝试记录img属性时，currentSrc元素对象尚未完全加载。

因此，请使用在onload元素完成加载后触发的img事件：

var myImg = this.$refs.primaryImg;
myImg.onload = function(){
    console.dir(myImg.currentSrc);
}