关于在vue模板中使用别名得问题

在vue的template模板，如果你引用了图片，那么你是可以直接使用别名的
类似这样，"<img src='@/asd/asd'>"
但如果你要在v-html中使用别名，那就不好使了，比如你有这样一个需求，你从后台拿了一个字符串要在前台展示， 但这个字符串里边有几个表情符号，这个表情符号只给你个flag，你需要通过这个flag在你的前台自己去本地image 中去寻找，所以正常逻辑是： 1.你拿到字符串之后做replace + 正则处理，匹配到flag。然后动态替换成img标签 2.匹配到标签后动态设置src 上面的操作由于产生了html标签，所以你在vue中直接使用 {{}} 或者v-text是无效，如果你不单独封装一个组件 出来的话，那么就只能使用v-html，但此刻你上面第二部设置的src中如果使用了别名就会失效，原因是v-html在vue内部只是用过innerHTML实现的，在模板解析的过程中是不处理的别名的，解决方案是使用require来动态引入，这样别名就可以使用了。另外还有一个问题，这种动态生成的标签，通过v-html插入到页面，less 或 scss的嵌套语法无法生效，样式加不进去，两种办法， 1是去掉style的scoped属性，而是在类名前面加上 /deep/

const getFaces = ()=>{
  // 表情替换
  var alt = [
        "[微笑]",
        "[色]",
        "[呆]",
        "[流泪]",
        "[害羞]",
        "[闭嘴]",
        "[睡觉]",
        "[尴尬]",
        "[发怒]",
        "[调皮]",
        "[呲牙笑]",
        "[吃惊]",
        "[不开心]",
        "[酷]",
        "[抓狂]",
        "[哈哈]",
        "[奋斗]",
        "[狂喷]",
        "[疑问]",
        "[嘘]",
        "[衰]",
        "[骷髅]",
        "[叹气]",
        "[鼓掌]",
        "[坏笑]",
        "[亲亲]",
        "[吓呆了]",
        "[可怜]",
        "[滑稽]",
        "[没办法]",
        "[思考]",
        "[吐血了]",
        "[瞎]",
        "[嗷嗷]",
        "[无奈]",
        "[赞]",
        "[弱]",
        "[握手]",
        "[No]",
        "[OK]",
      ],
      arr = {};
  alt.forEach((v,i)=>{
    arr[v] = require(`@/images/face/${i}.png`);
  })
  return arr;
}

更新一下，在react中使用这种方式需要加个.default

    arr[v] = require(`@/images/face/${i}.png`).default;  // 这里要注意下，否则require引入的是个[object,moudle]
  })