使用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包含要使用的不同网址，具体取决于用户的设备视口。

为了访问元素的属性，我使用了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

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

所以使用在onload元素完成加载后触发的img事件：

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

Answer 2

Vamsi的答案在img尚未加载时是正确的。 为了使您的currentSrc动态化，我建议您捕获屏幕大小的更改并相应地更新

首先，将currentSrc添加到您的数据中。

data () {
  return {
    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=""
     @load="e => currentSrc = e.target.currentSrc"
     > 

捕捉屏幕尺寸变化的变化

mounted () {
  this.$nextTick(function() {
    window.addEventListener('resize', this.updateCurrentSrc);      
  })
},
methods: {
  updateCurrentSrc () {
    this.currentSrc = this.$refs.primaryImg.currentSrc
  }
}    

并使用currentSrc

<img :src="currentSrc" v-if="currentSrc">