技術標籤：圖片處理vuejsonjavascriptjsimg

今天小編引入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>
 
//背景圖

以上為解決方案，需要的小夥伴收藏，如有不足，歡迎留言