快捷導(dǎo)航

Vue動態(tài)設(shè)置圖片時src不生效的原因及解決方法

更新時間：2022年08月04日 09:43:11 作者：Celester_best

這篇文章主要介紹了Vue動態(tài)設(shè)置圖片時src不生效的原因及解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

原因分析

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

<template>
  <div>
    <h1>動態(tài)設(shè)置圖片</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>

由結(jié)果可以看出圖片加載失敗。

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

解決方法

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

<template>
  <div>
    <h1>動態(tài)設(shè)置圖片</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是在運(yùn)行時加載，而import是編譯時加載；

如果希望使用import引入圖片就需要提前導(dǎo)入圖片。

<template>
  <div>
    <h1>動態(tài)設(shè)置圖片</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>