webpack的别名怎么配合vue的动态绑定结合起来使用

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

比如上面这个例子,@会直接插入到src里面而不是经过webpack解析别名,请问这种情况下如何解决?

回答:

修正下答案

假设你在webpack的alias配置了别名,比如这里的@指向了你的源代码目录

weback提供了一个高级机制解析文件,应用在那里非js代码中解析路径。
如这里的图片,我们先假设这张图片不是动态的,是固定的一张图,那么你可以在用以下方式设置图片路径

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

但按照你这边的代码逻辑,它其实是一个动态的图片,又是通过vue的动态属性绑定方式增加的,所以本质上你必须要在<script>部分把所有的资源全部导入进来,并绑定到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>

否则按照你的那段代码,它其实就是解析了模板字符串

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注