Photos are not loaded into the application on Framework7 + Vue.js. What to do?

Question

Vue.js

I put images in src/assets and run npm run dev app. The code itself looks like this : The browser console outputs this: ostracon.jpg:1 GET localhost:8080/assets/ostracon.jpg 404 (Not Found). Tell me what to do. <img src='../assets/ostracon.jpg'>

Answer 1

The fact is that you are trying to call static files from this url. But it does not exist, because when building webpack (Any other collector) it does not try to load them from the webpack root folder (Any other collector), but only the browser loads from this regular link. In a word, you need to either 1) Store the static separately, and allocate special urls for it, for example "/static/images/blahblah.jpg/", or 2) Use a call inside webpack (Any other bundler) either through or through the es6 standard (import). But you need to specify the type (extension) of the images that you will load in the webpack config (Any other collector), otherwise it will start to panic when loading. <img src='require("./assets/ostracon.jpg")'>