Javascript – Vue-Lazyload-Pfadproblem

Question

Stellen Sie eine Frage:

目录
__ 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
});

Executionnpm run dev在浏览器中报错http://localhost:8080/assets/images/.... 找不到，把上面的路径改成/src/assets/imgs/imgerror.jpg meldet ebenfalls einen Fehler.
Dann habe ich das Bild unter dem Ordner static auf der gleichen Ebene wie src abgelegt und den Code neu geschrieben:

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

Das Bild kann erfolgreich geladen werden. Ich dachte, ich hätte lange keine Ahnung.

Answer 1

./assets/imgs/imgerror.jpg这个看你目录里面是没有imgs文件夹的

Answer 2

说是在模板中的路径会被webpack解析，而js中的路径需要通过import、require引用或将图片放在static下面参考

Answer 3

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