Wenn die Daten nicht vollständig geladen sind, wird das Standardbild angezeigt. Wenn Daten vorhanden sind, wird das Bild in den Daten angezeigt. Hier verwenden wir das Vue-Lazyload-Plug-In.
Verwenden Sie zunächst npm install --save vue-lazyload, um es zu installieren. Führen Sie es nach der Installation in main.js ein und konfigurieren Sie es.
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
loading: require('./assets/common/default.png') //此图片路径为懒加载的默认图
})
Verwenden Sie bei Bedarf einfach den Befehl v-lazy.
Zum Beispiel: <img v-lazy="item.album_img_9" />