Today, the editor introduces fake json data, and the images cannot be loaded. I hereby write this article to record it for your convenience
.
async getlist() {
let res =await require("./product.json");
}
Image display errors
js in
data.forEach((item) => {
if (this.$route.params.id == item.id) {
this.img = require(item.img);
}});
json file
"img": "../../assets/img/product/d1.png",
html call
<img :src="img" alt="" />
<div :style="{ backgroundImage: 'url(' + img + ')' }"></div>//背景图
Error reporting
solution: Modify the
json file to
"img": "d1.png",
js in
data.forEach((item) => {
if (this.$route.params.id == item.id) {
this.img = require("../../assets/img/product/" + item.img);
}});
html call
<img :src="img" alt="" />
<div :style="{ backgroundImage: 'url(' + img + ')' }"></div>//背景图
The above is the solution, the small partners who need to collect, if there is any deficiency, please leave a message