在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ webpack的別名怎么配合vue的動(dòng)態(tài)綁定結(jié)合起來(lái)使用

webpack的別名怎么配合vue的動(dòng)態(tài)綁定結(jié)合起來(lái)使用

<img :src="`@/assets/img_platform_${item.imgName}@2x.png`">

比如上面這個(gè)例子,@會(huì)直接插入到src里面而不是經(jīng)過(guò)webpack解析別名,請(qǐng)問(wèn)這種情況下如何解決?

回答
編輯回答
念舊

修正下答案

假設(shè)你在webpack的alias配置了別名,比如這里的@指向了你的源代碼目錄

weback提供了一個(gè)高級(jí)機(jī)制解析文件,應(yīng)用在那里非js代碼中解析路徑。
如這里的圖片,我們先假設(shè)這張圖片不是動(dòng)態(tài)的,是固定的一張圖,那么你可以在用以下方式設(shè)置圖片路徑

<img src="~@/assets/img_platform_logo@2x.png">

但按照你這邊的代碼邏輯,它其實(shí)是一個(gè)動(dòng)態(tài)的圖片,又是通過(guò)vue的動(dòng)態(tài)屬性綁定方式增加的,所以本質(zhì)上你必須要在<script>部分把所有的資源全部導(dǎo)入進(jìn)來(lái),并綁定到data上,然后再處理圖片變量

// xx.vue

<template>
<img :src="imageDict[item.imgName]">
</template>
<script>
  import logo1 from '@/assets/image/logo1.jpg'
  import logo2 from '@/assets/image/logo2.jpg'

  export default {
    data() {
      return {
        imageDict: {
          'logo1': logo1,
          'logo2': logo2,
        }
      }
    }
  }
</script>

否則按照你的那段代碼,它其實(shí)就是解析了模板字符串

2018年9月18日 10:08