在Vue/Laravel中延遲加載圖像

我正在嘗試在我的Laravel/Vue項目中使用jQuery Lazy Loading，但我努力讓圖像出現在我的Vue組件中。我有我想下面的IMG塊將工作：在Vue/Laravel中延遲加載圖像

<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插件，因爲我可以在我的網站上的其他地方成功調用它（例如在刀片視圖上），但是我不確定我出錯的位置。謝謝。

來源

2017-08-16 Redback87

機會是'數據original'不受Vue公司在調用'$（img.lazy）.lazyload（）'的時間設置。當您檢查時，「」的標記看起來是否正確？ –

啊，這可能是一種可能性。標記本身看起來是正確的，如果我在檢查器中將'data-original'更改爲'src'，圖像顯示出來，所以我知道鏈接是正確的。我在模板視圖的主體的末尾調用'$（「img.lazy」）。lazyload（）'，我會嘗試移動它並查看是否有所作爲。 – Redback87

嘗試將呼叫移動到$("img.lazy").lazyload()到您的Vue實例的mounted()方法中。我剛剛與Vue和jQuery Lazyload有類似的問題，併爲我解決了它。例如：

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

來源

2017-12-11 14:02:44 Clayton

在Vue/Laravel中延遲加載圖像

回答

相關問題