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