javascript - vue-lazyload path problem

Question

Ask a 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
});

Executionnpm run devReport an error in the browserhttp://localhost:8080/assets/images/.... Cannot find, change the above path to /src/assets/imgs/imgerror.jpgThe same error is reported.
Then I put the image under the static folder at the same level as src, and rewrote the code:

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

The picture can be loaded successfully, but I haven’t had a clue for a long time.

Answer 1

./assets/imgs/imgerror.jpg It seems that there is no imgs folder in your directory

Answer 2

It is said that the path in the template will be parsed by webpack, while the path in js needs to be referenced through import, require or put the image under static for reference

Answer 3

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