javascript - vue-lazyload 路徑問題

Question

請教一個問題:

目录
__ src
  |_ assets
     |_imgs
        |_ imgloading.gif
        |_ imgerror.jpg
__ static
  |_ imgloading.gif
  |_ imgerror.jpg

// src/main.js
Vue.use(VueLazyload, {
  error: './assets/imgs/imgerror.jpg',
  loading: './assets/imgs/imgloading.gif',
  preLoad: 1,
  attempt: 1
});

執行npm run dev在瀏覽器中報錯誤http://localhost:8080/assets/images/.... 找不到，把上面的路徑改成/src/assets/imgs/imgerror.jpg同樣報錯。
然後我把圖片放在與src同級的資料夾static下面，改寫程式碼：

// src/main.js
Vue.use(VueLazyload, {
  error: '../static/imgerror.jpg',
  loading: '../static/imgloading.gif',
  preLoad: 1,
  attempt: 1
});

圖片就可以載入成功，想到很久沒上面頭緒。

Answer 1

./assets/imgs/imgerror.jpg這個看你目錄裡面是沒有imgs資料夾的

Answer 2

說是在模板中的路徑會被webpack解析，而js中的路徑需要透過import、require引用或將圖片放在static下面參考

Answer 3

require('./assets/imgs/imgerror.jpg')