vue-lazyload 路径问题

请教一个问题:

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

图片就可以加载成功,想到很久没上面头绪。

阅读 6k
4 个回答

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

require('@/assets/imgs/imgerror.jpg')
clipboard.png

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题