javascript - 使用 Vue 获取 img currentSrc

Question

基本上，我有一个看起来像这样的 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 包含根据用户设备视口(viewport)使用的不同 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？

Answer 1

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

所以使用 onload 事件，它在 img 元素完成加载后触发:

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