Question

我正在尝试在我的Laravel / Vue项目中使用jQuery Lazy Loading，但我很难在Vue组件中显示图像。我有以下img块，我认为可以工作：

<img v-if="vehicle.photo_path != null" :data-original="'/storage/vehicles/' + vehicle.photo_path" class="lazy" height="180" width="150"/>

我确实在这里找到了另一个问题 - Static image src in Vue.js template - 但是当我尝试这种方法时，我得到了这个问题：Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.

所以我切换回v-bind方法，但我得到的只是一个带有灰色边框的白色框 - 没有图像。如果我对src属性进行v-bind，但是我可以正确地看到图像。

我知道我已正确实施了Lazy Loading插件，因为我可以在我的网站上的其他地方成功调用它（例如在刀片视图上），但我不确定我哪里出错了。谢谢。

Answer 1

尝试将对$("img.lazy").lazyload()的调用移至Vue实例上的mounted()方法。我刚刚遇到了与Vue和jQuery Lazyload类似的问题，并为我解决了这个问题。例如：

var app = new Vue({
    el: ...
    data() ...
    computed: ... 
    methods: ...
    mounted() {
        $("img.lazy").lazyload()
    }
})

在Vue / Laravel中加载图片

1 个答案: