Получить IMG CurrentSrc с помощью Vue

1

В принципе, у меня есть элемент 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-адреса, которые будут использоваться в зависимости от srcset просмотра пользовательского устройства.

Чтобы получить доступ к свойствам элемента, я использовал Vue this.$refs.

На mounted() я попытался console.dir(this.$refs.primaryImg).

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

Он показывал currentSrc в консоли браузера

Изображение 174551

Однако, когда я пытался это сделать

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

Он возвращает пустую строку. Я предполагаю, что это должно быть проблемой жизненного цикла, img src не может быть инициализирован в этот момент времени. Как получить currentSrc?

Теги:
vuejs2

2 ответа

2
Лучший ответ

Объект элемента img еще не загружен полностью, когда вы пытаетесь зарегистрировать свойство currentSrc.

Поэтому используйте событие onload которое запускается после того, как элемент img завершит загрузку:

var myImg = this.$refs.primaryImg;
myImg.onload = function(){
    console.dir(myImg.currentSrc);
}
  • 0
    Настоящим я объявляю вас, сэр, богом Vue / Javascript в Stackoverflow. Спасибо! Это решение сработало.
  • 0
    Спасибо, но есть намного лучше людей, чем я :)
Показать ещё 2 комментария
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">    
  • 0
    спасибо @jazel! еще не думал об этой проблеме. Это определенно поможет отзывчивости нашего сайта. Большое спасибо!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню