vue-lazyloadで発生したピット(ローカルピクチャパスの問題)

4196 ワード
最適化
一、据付
<span style="font-size:18px;">$ npm install vue-lazyload -D</span>

二、公式リンク
公式ドキュメントリンクvue-lazyloadを添付します
三、注意事項
1、ここではローカルピクチャアドレスをインタフェースで要求されたピクチャアドレスに変更し、その他は公式ドキュメント2、ピクチャとassetsフォルダにあり、require()を使用して導入する必要がある.3、画像はstaticフォルダで、直接パスを書くことができます
<div v-lazy-container="{ selector: 'img' }">
  <img 
    :data-src="xxx.img_url" 
    :data-error="xxx.errorimg_url">  
</div>

または
<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

および構成
Vue.use(VueLazyload, {
  preLoad: 1.3,
  loading: ‘../static/loading.gif',
  attempt: 1
})
Vue.use(VueLazyload, {
  preLoad: 1.3,
  loading: require('./assets/loading.gif'),
  attempt: 1
})

まとめ:vue-lazyloadはmain.jsファイルに導入され、webpackにコンパイルされず、srcのファイルはwebpackにコンパイルされ、assets、assetsフォルダのピクチャアドレスを含め、コンパイル中に変更されます.そのためvue-lazyloadはピクチャアドレスを正しく取得できず,ピクチャを表示できなくなった.
Firewallコマンドラインの詳細
【Ubuntu】vimコンパイルcプログラム