快捷導(dǎo)航

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

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

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

原因分析

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

<template>
  <div>
    <h1>動(dòng)態(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之后會(huì)發(fā)現(xiàn)，src被當(dāng)做靜態(tài)資源處理了，并沒有進(jìn)行編譯。

解決方法

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

<template>
  <div>
    <h1>動(dòng)態(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)行時(shí)加載，而import是編譯時(shí)加載；

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

<template>
  <div>
    <h1>動(dòng)態(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>