vue 处理接收数据中的特殊字符

Question

一个聊天接收和发送功能，从后台获取的数据是

上面这种情况是单发表情的数据，然后我用正则过滤了一下，可是界面的表情显示不出来，表情的路径是对的

正则过滤函数:

reaplceIMG(s, style) {
    var reg = /\{.*?\}/g;
    return s.replace(reg, function(tmp) {
          var tmp = tmp.substr(1, tmp.length - 2).split('_');
          var url = tmp[1];
          var type = tmp[0];
          var img = '';
          if (type === 'em') {
            img = "<img src='./../../assets/emoji/32/" + url + ".png' class=\"" + style + "\">";
          }
          return img;
    });
}

这是界面展示效果

各位大神，求解。

Answer 1

肯定是图片路径不对，webpack会按照他的配置来解析输出你的项目，所以具体的图片路径要看你的配置是什么样的

你这个img是怎么追加到页面上的，是通过v-html还是js的dom操作，如果是dom操作，可能webpack没有检测到你使用改图片，所以没有给你输出

另外，这种静态资源最好放在static下，这样不会给你解析，然后使用路径'/static/img/emjo...'来访问你的资源

最后，'./../'这种路径没错，但是也没必要加'./'