欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue2.0如何動態(tài)綁定img的src屬性(三元運算)

 更新時間：2024年08月30日 09:19:22   作者：寫代碼的拉克絲  
這篇文章主要介紹了vue2.0如何動態(tài)綁定img的src屬性(三元運算)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue2.0動態(tài)綁定img的src屬性(三元運算)

在vue項目中，如果需要動態(tài)判斷img的src地址 方法如下：

方法一

在標簽里進行三元運算符判斷的時候，引用地址外層需要加require()

require 函數(shù)在構(gòu)建時會解析圖片路徑，并將圖片打包到正確的位置。

使用 require 可以確保路徑在打包時正確解析。

<img :src="checkResult.result?require('@/assets/images/passed_big.png'):require('@/assets/images/passed_big2.png')" alt="">

方法二

使用computed屬性來動態(tài)計算img的src路徑

<template>
  <div>
    <img :src="getImageSrc" alt="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkResult:true
    };
  },
  computed: {
    getImageSrc() {
      return this.checkResult
        ? require('@/assets/images/passed_big.png')
        : require('@/assets/images/passed_big2.png');
    }
  }
};
</script>

<style scoped>
/* 你的樣式 */
</style>

方法三

動態(tài)import可以用于在運行時加載資源，但這種方法通常用于更復(fù)雜的場景，如按需加載模塊

<template>
  <div>
    <img :src="getImageSrc" alt="">
  </div>
</template>
export default {
  data() {
    return {
      checkResult:true
      imageSrc: ''
    };
  },
  async created() {
    this.imageSrc = this.checkResult
      ? await import('@/assets/images/passed_big.png')
      : await import('@/assets/images/passed_big2.png');
  }
};

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論