vue如何引入本地json，并解决图片报错问题

今天小编引入json假数据，引入图片加载不出来，特此写了此文记录一下，方便你我他
本地json引入方式

    async getlist() {
    
    
      let res =await require("./product.json");
    }

图片显示错误导致
js中

        data.forEach((item) => {
    
    
          if (this.$route.params.id == item.id) {
    
    
          this.img = require(item.img);
          }});

json文件中

 "img": "../../assets/img/product/d1.png",

html 调用

  <img :src="img" alt="" />
  <div :style="{ backgroundImage: 'url(' + img + ')' }"></div>//背景图

报错

解决方案：
json文件中修改成

    "img": "d1.png",

js中

  data.forEach((item) => {
    
    
	  if (this.$route.params.id == item.id) {
    
    
	  this.img = require("../../assets/img/product/" + item.img);
  }});

html 调用

  <img :src="img" alt="" />
  <div :style="{ backgroundImage: 'url(' + img + ')' }"></div>//背景图

以上为解决方案，需要的小伙伴收藏，如有不足，欢迎留言