vue中使用require動態拼接img路徑

阿新 • • 發佈：2021-07-13

一般情況下，我們在使用require存放一個圖片地址時，都是這麼寫：

<img width="100%; height: 100%" :src="bannarsrc" />


<script>
    data () {
        return {
            bannarsrc: require('@/assets/images/bannar-small.png')
        }
    }
</script>

然後當適配不同的裝置時直接對這個地址進行賦值即可

changeBannarImage() {
  const phone = 414; // 
手機
  const ipad = 768; //ipad
  //const ipadpro = 1024  //ipadpro
  if (document.body.clientWidth <= phone) {
    this.bannarsrc = require("@/assets/images/bannar-small.png");
  } else if (
    document.body.clientWidth >= phone &&
    document.body.clientWidth <= ipad
  ) {
    this.bannarsrc = require("@/assets/images/bannar.png");
  }  
else {
    this.bannarsrc = require("@/assets/images/bannar-big.png");
  }
}

mounted() {
  this.changeBannarImage();
  window.onresize = () => {
    this.changeBannarImage();
  };
}

但是當一次性要替換的圖片過多時，比如給選單這種很多圖片進行賦值，那顯然一個個的去寫賦值肯定不行，於是可以使用for迴圈去賦值，但是由於require不能對變數進行賦值，於是要使用拼接的方式，這裡我建立一箇中間變數用來表示圖片名稱。

data結構如下

<script>
export default {
  data() {
    return {
      menuList: [
        {
          menuName: "公司章程",
          messageCount: "",
          menuMethod: "articles",
          src: "",
        },
        {
          menuName: "訊息通知",
          messageCount: 13,
          menuMethod: "message",
          src: "",
        },
        { menuName: "待辦中心", messageCount: 9, menuMethod: "dealt", src: "" },
        { menuName: "新聞中心", messageCount: "", menuMethod: "news", src: "" },
        {
          menuName: "知識平臺",
          messageCount: "",
          menuMethod: "knowledge",
          src: "",
        },
        { menuName: "計劃任務", messageCount: 9, menuMethod: "plan", src: "" },
        {
          menuName: "排班",
          messageCount: "",
          menuMethod: "scheduling",
          src: "",
        },
        { menuName: "申請", messageCount: "", menuMethod: "apply", src: "" },
        {
          menuName: "考勤&行政",
          messageCount: "",
          menuMethod: "attendance",
          src: "",
        },
      ],
      menuSrc: [
        "article{0}.png",
        "message{0}.png",
        "todo{0}.png",
        "new{0}.png",
        "know{0}.png",
        "plan{0}.png",
        "scheduling{0}.png",
        "apply{0}.png",
        "attendance{0}.png",
      ],
    };
  },
};
</script>

適配時程式碼如下

  changeMenuImage() {
    const menu_list = this.menuList;
    const phone = 414; //手機
    const ipad = 768; //ipad
    //const ipadpro = 1024  //ipadpro
    let zoom = "";
    if (document.body.clientWidth <= phone) {
      zoom = "1x";
    } else if (
      document.body.clientWidth > phone &&
      document.body.clientWidth <= ipad
    ) {
      zoom = "2x";
    } else {
      zoom = "3x";
    }
    for (let index = 0; index < menu_list.length; index++) {
      const element = menu_list[index];
      const src = this.menuSrc[index].replace("{0}", zoom);
      element.src = require(`@/assets/images/${src}`);
    }
  },