Не удается загрузить изображения с относительного пути с плагином Vue V-Lazy-Image - PullRequest
Новая
       12

Не удается загрузить изображения с относительного пути с плагином Vue V-Lazy-Image

0 голосов
/ 20 мая 2018

Я использую этот плагин для создания галереи портфолио в приложении с одной страницей компонентов, но я застрял при загрузке изображений по относительному пути, он работает нормально, если я использую полный URL-путь.

Когда я использую полный URL-адрес, изображение загружается и теряет размытие, как и ожидалось, вместо этого, когда я использую относительный путь, изображение загружается, но оно остается размытым и не загружает класс .v-lazy-imageзагружается в тег изображения.Есть идеи?вот код.

LazyImage.vue 

<template>
<v-lazy-image :src="src" />
</template>

<script>
import VLazyImage from 'v-lazy-image'

export default {
  props: {
    // HERE I TRIED TO USE A FUNCTION ALSO WITH NO LUCK
    // src: Function 
    src: String
  },
  components: {
    VLazyImage
  },
// UPDATE: I added a method to test here.
methods: {
  consoleSuccess (msg) {
    console.log(msg)
    }
  }
}
</script>

Portfolio.vue 

<template>
<section id="portfolio">
// I'M TRYING THIS TWO OPTIONS
// UPDATED: I Added here the events calls and its just calling the intersect but the load.
<v-lazy-image src="../assets/img/innovation.jpg" alt="alternate text" @load="consoleSuccess('LOADED!')" @intersect="consoleSuccess('INTERSECS!')"></v-lazy-image> <-- this just work with full url ex. http://cdn...
<v-lazy-image :src="require('../assets/img/innovation.jpg')" alt="alternate text"></v-lazy-image> <-- this loads the image but remains blured
</section>
</template>

<script>
import VLazyImage from '@/components/lazyImage'

export default {
  components: {
    VLazyImage
  }
}
</script>

ОБНОВЛЕНИЕ Я добавил метод для проверки и понялчто просто вызывается событие @intersect, и @load вообще не будет запускаться с относительными путями.

1 Ответ

0 голосов
/ 02 июня 2018

Я заметил, что это было вызвано ошибкой в ​​коде компонента:

if (this.$el.src === this.src) {

следует заменить на

if (this.$el.getAttribute('src') === this.src) {

Iотправил запрос на извлечение для этого.

...