无法使用 Vue V-Lazy-Image 插件从相对路径加载图像

Question

我正在使用此 plugin 在单页组件应用程序上创建投资组合图库，但我无法从相对路径加载图像，如果我使用完整 URL路径。

当我使用完整 URL 时，图像加载并按预期消除模糊，相反，当我使用相对路径时，图像加载但它保持模糊并且不加载 class .v-lazy-image-loaded 到图像标签中。有任何想法吗？这是代码。

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 根本不会触发相对路径。

Answer 1

我注意到这是由组件代码中的错误引起的：

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

应替换为

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

我已经为此发送了拉取请求。

无法使用 Vue V-Lazy-Image 插件从相对路径加载图像

Can't load images from relative path with Vue V-Lazy-Image Plugin

lazy-loading

vue.js

vue-cli