Question

我正在使用此plugin在单页组件应用程序上创建投资组合库，但我从相对路径加载图像，如果我使用完整的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根本不会用相对路径触发。

Answer 1

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

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

应替换为

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

我已经发送了拉请求。

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

1 个答案: