亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue2.0如何動(dòng)態(tài)綁定img的src屬性(三元運(yùn)算)

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

vue2.0動(dòng)態(tài)綁定img的src屬性(三元運(yùn)算)

在vue項(xiàng)目中，如果需要?jiǎng)討B(tài)判斷img的src地址 方法如下：

方法一

在標(biāo)簽里進(jìn)行三元運(yùn)算符判斷的時(shí)候，引用地址外層需要加require()

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

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

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

方法二

使用computed屬性來(lái)動(dòng)態(tài)計(jì)算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>

方法三

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

<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é)

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

相關(guān)文章

最新評(píng)論