Vue cannot display the picture (the path taken from the database)
problem description
this is the src when the database field is. /.. /.. / assets/image/elites/gaoyan.jpg
require("./../../assets/image/elites/gaoyan.jpg") s"r"c
neither of them can display the picture properly
the environmental background of the problems and what methods you have tried
related codes
/ / Please paste the code text below (do not replace the code with pictures)
//
<div>
<img src="./../../assets/image/elites/gaoyan.jpg" alt="">
</div>
//
<div>
<img :src="imgSrc" alt="">
</div>
data() {
return {
imgSrc: ""
}
},
created () {
this.$axios.get("xxxx").then(
response => {
this.imgSrc= response.data.img_src;
console.log(this.imgSrc);
}
).catch(
error => {
console.log(error);
}
)
}
/ / the database img_src field stores this require (". /.. /.. / assets/image/elites/gaoyan.jpg")
or this. /.. /.. / assets/image/elites/gaoyan.jpg
what result do you expect? What is the error message actually seen?
I hope the boss can help solve the problem of picture display
1. / assets directory resources themselves are escaped into base64 and packaged into / dist/app.js , so relative paths cannot be used;
2. Using require to access images is also an operation that takes effect at compile time. It is invalid to use require operation after the backend returns.
so you can put resources that are static and do not want to be compiled under the / static directory , and the / static directory will be copied to the built / dist folder by default, and the relative path can be used; but recommends that the database store the absolute path , otherwise it is unreasonable to change the resource location and change the database data.
registered a special account, and I climbed on this pit for half a day : (
)
Note: the method on the first floor is through the introduction of pictures in the static folder, but this method is no longer applicable in vue-cli 3.x. Vue-cli3 has encapsulated the static folder and cannot use this method.
solution:
if you want to dynamically obtain the image path in the database and display it through the front-end v-for loop, here I choose the require () method
first of all, you need to understand some notes on the use of require ():
require(path) ,path , ,
:
< hr >
here is the solution:
method 1:
The
code can be similar to:
var imgUrl = "a";
let img = require('../images/'+imgUrl+'.jpg');
the first part is part of the relative path of the picture, the second part imgUrl is the picture name (which can be set as a variable), and the last part is the picture suffix.
method 2:
require('../images/'+imgUrl);imgUrl
:can't find module './xxx.jpg'
I used the v-for loop to dynamically traverse the image path passed by require (), and then made a scroll graph.
if you follow my solution, but still report an error can't find module'. / xxx.jpg'
- Please check that you have complied with the usage rules of the require () method
- check whether your image path is misled. The image path usually introduces a relative path.
< hr >
now question posts in China are plagiarizing each other. Some people ask questions in the forum, but no one answers them. Those who will know it by heart. Never. I sincerely hope that I can help you here.
1. Can the browser open the link to see the picture?
2. Yes, see if it's the CSS problem; no, the picture path problem.
3, and the image path of the database should not be an absolute path, that is, there is no . /.. /.. / , it should be / xxx.png
the server returns the full absolute path.
