Vue動態(tài)設置img的src不生效的問題解決

更新時間：2024年01月24日 15:41:47 作者：Celester_best

本文主要介紹了Vue動態(tài)設置img的src不生效的問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

原因分析

在vue項目中動態(tài)設置img的src時，圖片會加載失敗。我們可以先看個例子。

<template>
  <div>
    <h1>動態(tài)設置圖片</h1>
    <div>
      <h5>圖片一</h5>
      <img
        :src="
          logoFlag === 'vue'
            ? '../assets/vue-logo.png'
            : '../assets/react-logo.png'
        "
      />
      <div>
        <button @click="changeLogo">切換</button>
      </div>
      <h5>圖片二</h5>
      <img :src="imgUrl" />
    </div>
  </div>
</template>
<script>
export default {
  name: "ImgTest",
  data() {
    return {
      logoFlag: "vue",
      imgUrl: "../assets/vue-logo.png",
    };
  },
  methods: {
    changeLogo() {
      this.logoFlag = this.logoFlag === "vue" ? "react" : "vue";
    },
  },
};
</script>
<style scoped>
img {
  width: 50px;
  height: 50px;
}
</style>

由結果可以看出圖片加載失敗。

查看elements之后會發(fā)現(xiàn)，src被當做靜態(tài)資源處理了，并沒有進行編譯。

解決方法

為了解決動態(tài)的src沒有進行編譯的問題，我們可以使用require引入圖片。

<template>
  <div>
    <h1>動態(tài)設置圖片</h1>
    <div>
      <h5>圖片一</h5>
      <img
        :src="
          logoFlag === 'vue'
            ? require('../assets/vue-logo.png')
            : require('../assets/react-logo.png')
        "
      />
      <div>
        <button @click="changeLogo">切換</button>
      </div>
      <h5>圖片二</h5>
      <img :src="imgUrl" />
    </div>
  </div>
</template>
<script>
export default {
  name: "ImgTest",
  data() {
    return {
      logoFlag: "vue",
      imgUrl: require("../assets/vue-logo.png"),
    };
  },
  methods: {
    changeLogo() {
      this.logoFlag = this.logoFlag === "vue" ? "react" : "vue";
    },
  },
};
</script>
<style scoped>
img {
  width: 50px;
  height: 50px;
}
</style>

可以看到使用require引入圖片之后，圖片就可以正常加載出來了。

import和require的區(qū)別

require是在運行時加載，而import是編譯時加載；

如果希望使用import引入圖片就需要提前導入圖片。

<template>
  <div>
    <h1>動態(tài)設置圖片</h1>
    <div>
      <h5>圖片一</h5>
      <img
        :src="
          logoFlag === 'vue'
            ? require('../assets/vue-logo.png')
            : require('../assets/react-logo.png')
        "
      />
      <div>
        <button @click="changeLogo">切換</button>
      </div>
      <h5>圖片二</h5>
      <img :src="imgUrl" />
    </div>
  </div>
</template>
<script>
import reactLogo from "../assets/react-logo.png";

export default {
  name: "ImgTest",
  data() {
    return {
      logoFlag: "vue",
      imgUrl:reactLogo,
    };
  },
  methods: {
    changeLogo() {
      this.logoFlag = this.logoFlag === "vue" ? "react" : "vue";
    },
  },
};
</script>
<style scoped>
img {
  width: 50px;
  height: 50px;
}
</style>