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

Question

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

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

Answer 1

修正下答案

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

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

<img src="~@/assets/[e-mail]">

但按照你这边的代码逻辑，它其实是一个动态的图片，又是通过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>

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