发送的图片可以点击预览

src/js/utils/emojis.js

@@ -1,174 +1,105 @@
 export const emojis = {
-  '[微笑]':
-    "<img class='emoji' alt='[微笑]' title='微笑' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/0.gif'>",
-  '[撇嘴]':
-    "<img class='emoji' alt='[撇嘴]' title='撇嘴' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/1.gif'>",
-  '[色]':
-    "<img class='emoji' alt='[色]' title='色' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/2.gif'>",
-  '[发呆]':
-    "<img class='emoji' alt='[发呆]' title='发呆' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/3.gif'>",
-  '[得意]':
-    "<img class='emoji' alt='[得意]' title='得意' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/4.gif'>",
-  '[流泪]':
-    "<img class='emoji' alt='[流泪]' title='流泪' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/5.gif'>",
-  '[害羞]':
-    "<img class='emoji' alt='[害羞]' title='害羞' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/6.gif'>",
-  '[闭嘴]':
-    "<img class='emoji' alt='[闭嘴]' title='闭嘴' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/7.gif'>",
-  '[睡]':
-    "<img class='emoji' alt='[睡]' title='睡' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/8.gif'>",
-  '[大哭]':
-    "<img class='emoji' alt='[大哭]' title='大哭' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/9.gif'>",
-  '[尴尬]':
-    "<img class='emoji' alt='[尴尬]' title='尴尬' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/10.gif'>",
-  '[发怒]':
-    "<img class='emoji' alt='[发怒]' title='发怒' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/11.gif'>",
-  '[调皮]':
-    "<img class='emoji' alt='[调皮]' title='调皮' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/12.gif'>",
-  '[呲牙]':
-    "<img class='emoji' alt='[呲牙]' title='呲牙' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/13.gif'>",
-  '[惊讶]':
-    "<img class='emoji' alt='[惊讶]' title='惊讶' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/14.gif'>",
-  '[难过]':
-    "<img class='emoji' alt='[难过]' title='难过' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/15.gif'>",
-  '[酷]':
-    "<img class='emoji' alt='[酷]' title='酷' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/16.gif'>",
-  '[冷汗]':
-    "<img class='emoji' alt='[冷汗]' title='冷汗' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/17.gif'>",
-  '[抓狂]':
-    "<img class='emoji' alt='[抓狂]' title='抓狂' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/18.gif'>",
-  '[吐]':
-    "<img class='emoji' alt='[吐]' title='吐' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/19.gif'>",
-  '[偷笑]':
-    "<img class='emoji' alt='[偷笑]' title='偷笑' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/20.gif'>",
-  '[可爱]':
-    "<img class='emoji' alt='[可爱]' title='可爱' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/21.gif'>",
-  '[白眼]':
-    "<img class='emoji' alt='[白眼]' title='白眼' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/22.gif'>",
-  '[傲慢]':
-    "<img class='emoji' alt='[傲慢]' title='傲慢' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/23.gif'>",
-  '[饥饿]':
-    "<img class='emoji' alt='[饥饿]' title='饥饿' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/24.gif'>",
-  '[困]':
-    "<img class='emoji' alt='[困]':' title='困' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/25.gif'>",
-  '[惊恐]':
-    "<img class='emoji' alt='[惊恐]' title='惊恐' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/26.gif'>",
-  '[流汗]':
-    "<img class='emoji' alt='[流汗]' title='流汗' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/27.gif'>",
-  '[憨笑]':
-    "<img class='emoji' alt='[憨笑]' title='憨笑' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/28.gif'>",
-  '[大兵]':
-    "<img class='emoji' alt='[大兵]' title='大兵' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/29.gif'>",
-  '[奋斗]':
-    "<img class='emoji' alt='[奋斗]' title='奋斗' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/30.gif'>",
-  '[咒骂]':
-    "<img class='emoji' alt='[咒骂]' title='咒骂' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/31.gif'>",
-  '[疑问]':
-    "<img class='emoji' alt='[疑问]' title='疑问' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/32.gif'>",
-  '[嘘]':
-    "<img class='emoji' alt='[嘘]' title='嘘' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/33.gif'>",
-  '[晕]':
-    "<img class='emoji' alt='[晕]' title='晕' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/34.gif'>",
-  '[折磨]':
-    "<img class='emoji' alt='[折磨]' title='折磨' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/35.gif'>",
-  '[衰]':
-    "<img class='emoji' alt='[衰]' title='衰' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/36.gif'>",
-  '[骷髅]':
-    "<img class='emoji' alt='[骷髅]' title='骷髅' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/37.gif'>",
-  '[敲打]':
-    "<img class='emoji' alt='[敲打]' title='敲打' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/38.gif'>",
-  '[再见]':
-    "<img class='emoji' alt='[再见]' title='再见' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/39.gif'>",
-  '[擦汗]':
-    "<img class='emoji' alt='[擦汗]' title='擦汗' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/40.gif'>",
-  '[抠鼻]':
-    "<img class='emoji' alt='[抠鼻]' title='抠鼻' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/41.gif'>",
-  '[鼓掌]':
-    "<img class='emoji' alt='[鼓掌]' title='鼓掌' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/42.gif'>",
-  '[糗大了]':
-    "<img class='emoji' alt='[糗大了]' title='糗大了' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/43.gif'>",
-  '[坏笑]':
-    "<img class='emoji' alt='[坏笑]' title='坏笑' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/44.gif'>",
-  '[左哼哼]':
-    "<img class='emoji' alt='[左哼哼]' title='左哼哼' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/45.gif'>",
-  '[右哼哼]':
-    "<img class='emoji' alt='[右哼哼]' title='右哼哼' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/46.gif'>",
-  '[哈欠]':
-    "<img class='emoji' alt='[哈欠]' title='哈欠' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/47.gif'>",
-  '[鄙视]':
-    "<img class='emoji' alt='[鄙视]' title='鄙视' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/48.gif'>",
-  '[委屈]':
-    "<img class='emoji' alt='[委屈]' title='委屈' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/49.gif'>",
-  '[快哭了]':
-    "<img class='emoji' alt='[快哭了]' title='快哭了' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/50.gif'>",
-  '[阴险]':
-    "<img class='emoji' alt='[阴险]' title='阴险' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/51.gif'>",
-  '[亲亲]':
-    "<img class='emoji' alt='[亲亲]' title='亲亲' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/52.gif'>",
-  '[吓]':
-    "<img class='emoji' alt='[吓]' title='吓' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/53.gif'>",
-  '[可怜]':
-    "<img class='emoji' alt='[可怜]' title='可怜' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/54.gif'>",
-  '[菜刀]':
-    "<img class='emoji' alt='[菜刀]' title='菜刀' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/55.gif'>",
-  '[西瓜]':
-    "<img class='emoji' alt='[西瓜]' title='西瓜' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/56.gif'>",
-  '[啤酒]':
-    "<img class='emoji' alt='[啤酒]' title='啤酒' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/57.gif'>",
-  '[篮球]':
-    "<img class='emoji' alt='[篮球]' title='篮球' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/58.gif'>",
-  '[咖啡]':
-    "<img class='emoji' alt='[咖啡]' title='咖啡' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/60.gif'>",
-  '[饭]':
-    "<img class='emoji' alt='[饭]' title='饭' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/61.gif'>",
-  '[玫瑰]':
-    "<img class='emoji' alt='[玫瑰]' title='玫瑰' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/63.gif'>",
-  '[凋谢]':
-    "<img class='emoji' alt='[凋谢]' title='凋谢' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/64.gif'>",
-  '[示爱]':
-    "<img class='emoji' alt='[示爱]' title='示爱' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/65.gif'>",
-  '[爱心]':
-    "<img class='emoji' alt='[爱心]' title='爱心' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/66.gif'>",
-  '[心碎]':
-    "<img class='emoji' alt='[心碎]' title='心碎' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/67.gif'>",
-  '[蛋糕]':
-    "<img class='emoji' alt='[蛋糕]' title='蛋糕' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/68.gif'>",
-  '[炸弹]':
-    "<img class='emoji' alt='[炸弹]' title='炸弹' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/70.gif'>",
-  '[刀]':
-    "<img class='emoji' alt='[刀]' title='刀' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/71.gif'>",
-  '[足球]':
-    "<img class='emoji' alt='[足球]' title='足球' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/72.gif'>",
-  '[礼物]':
-    "<img class='emoji' alt='[礼物]' title='礼物' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/77.gif'>",
-  '[拥抱]':
-    "<img class='emoji' alt='[拥抱]' title='拥抱' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/78.gif'>",
-  '[强]':
-    "<img class='emoji' alt='[强]' title='强' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/79.gif'>",
-  '[弱]':
-    "<img class='emoji' alt='[弱]' title='弱' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/80.gif'>",
-  '[握手]':
-    "<img class='emoji' alt='[握手]' title='握手' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/81.gif'>",
-  '[胜利]':
-    "<img class='emoji' alt='[胜利]' title='胜利' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/82.gif'>",
-  '[抱拳]':
-    "<img class='emoji' alt='[抱拳]' title='抱拳' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/83.gif'>",
-  '[勾引]':
-    "<img class='emoji' alt='[勾引]' title='勾引' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/84.gif'>",
-  '[拳头]':
-    "<img class='emoji' alt='[拳头]' title='拳头' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/85.gif'>",
-  '[差劲]':
-    "<img class='emoji' alt='[差劲]' title='差劲' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/86.gif'>",
-  '[爱你]':
-    "<img class='emoji' alt='[爱你]' title='爱你' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/87.gif'>",
-  '[NO]':
-    "<img class='emoji' alt='[NO]' title='NO' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/88.gif'>",
-  '[OK]':
-    "<img class='emoji' alt='[OK]' title='OK' src='https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/89.gif'>"
+  '[微笑]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/0.gif',
+  '[撇嘴]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/1.gif',
+  '[色]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/2.gif',
+  '[发呆]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/3.gif',
+  '[得意]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/4.gif',
+  '[流泪]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/5.gif',
+  '[害羞]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/6.gif',
+  '[闭嘴]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/7.gif',
+  '[睡]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/8.gif',
+  '[大哭]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/9.gif',
+  '[尴尬]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/10.gif',
+  '[发怒]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/11.gif',
+  '[调皮]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/12.gif',
+  '[呲牙]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/13.gif',
+  '[惊讶]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/14.gif',
+  '[难过]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/15.gif',
+  '[酷]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/16.gif',
+  '[冷汗]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/17.gif',
+  '[抓狂]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/18.gif',
+  '[吐]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/19.gif',
+  '[偷笑]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/20.gif',
+  '[可爱]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/21.gif',
+  '[白眼]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/22.gif',
+  '[傲慢]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/23.gif',
+  '[饥饿]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/24.gif',
+  '[困]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/25.gif',
+  '[惊恐]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/26.gif',
+  '[流汗]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/27.gif',
+  '[憨笑]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/28.gif',
+  '[大兵]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/29.gif',
+  '[奋斗]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/30.gif',
+  '[咒骂]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/31.gif',
+  '[疑问]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/32.gif',
+  '[嘘]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/33.gif',
+  '[晕]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/34.gif',
+  '[折磨]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/35.gif',
+  '[衰]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/36.gif',
+  '[骷髅]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/37.gif',
+  '[敲打]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/38.gif',
+  '[再见]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/39.gif',
+  '[擦汗]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/40.gif',
+  '[抠鼻]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/41.gif',
+  '[鼓掌]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/42.gif',
+  '[糗大了]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/43.gif',
+  '[坏笑]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/44.gif',
+  '[左哼哼]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/45.gif',
+  '[右哼哼]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/46.gif',
+  '[哈欠]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/47.gif',
+  '[鄙视]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/48.gif',
+  '[委屈]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/49.gif',
+  '[快哭了]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/50.gif',
+  '[阴险]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/51.gif',
+  '[亲亲]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/52.gif',
+  '[吓]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/53.gif',
+  '[可怜]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/54.gif',
+  '[菜刀]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/55.gif',
+  '[西瓜]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/56.gif',
+  '[啤酒]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/57.gif',
+  '[篮球]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/58.gif',
+  '[咖啡]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/60.gif',
+  '[饭]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/61.gif',
+  '[玫瑰]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/63.gif',
+  '[凋谢]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/64.gif',
+  '[示爱]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/65.gif',
+  '[爱心]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/66.gif',
+  '[心碎]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/67.gif',
+  '[蛋糕]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/68.gif',
+  '[炸弹]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/70.gif',
+  '[刀]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/71.gif',
+  '[足球]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/72.gif',
+  '[礼物]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/77.gif',
+  '[拥抱]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/78.gif',
+  '[强]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/79.gif',
+  '[弱]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/80.gif',
+  '[握手]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/81.gif',
+  '[胜利]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/82.gif',
+  '[抱拳]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/83.gif',
+  '[勾引]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/84.gif',
+  '[拳头]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/85.gif',
+  '[差劲]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/86.gif',
+  '[爱你]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/87.gif',
+  '[NO]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/88.gif',
+  '[OK]': 'https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/89.gif'
 }
 
 /**
- * 把消息内容中的"[xxx]"替换为img标签
+ * 组装一个emoji的img元素
+ * @param {*} emojiId
+ * @returns
+ */
+export const getEmojiHtml = (emojiId) => {
+  const url = emojis[emojiId]
+  if (url) {
+    return `<img class='emoji' alt='${emojiId}':' title='${emojiId.slice(1, -1)}' src='${url}'>`
+  } else {
+    return emojiId
+  }
+}
+
+/**
+ * 把消息内容中的"[xxx]"替换为img html元素
  * @param {*} content 消息内容
  */
 export const emojiTrans = (content) => {
@@ -179,8 +110,11 @@ export const emojiTrans = (content) => {
   }
 
   new Set(matches).forEach((item) => {
-    const emoji = emojis[item]
-    content = emoji ? content.replaceAll(item, emoji) : content
+    const url = emojis[item]
+    if (url) {
+      const emojiHtml = `<img class='emoji' alt='${item}':' title='${item.slice(1, -1)}' src='${url}'>`
+      content = content.replaceAll(item, emojiHtml)
+    }
   })
 
   return content

src/stores/image.js

@@ -14,8 +14,17 @@ export const imageStore = defineStore('anyim-image', () => {
    */
   const image = ref({})
 
-  const setImage = (obj) => {
+  /**
+   * 在同一个session中的image（id）集合
+   */
+  const imageInSession = ref({})
+
+  const setImage = (sessionId, obj) => {
     image.value[obj.objectId] = obj
+    if (!imageInSession.value[sessionId]) {
+      imageInSession.value[sessionId] = []
+    }
+    imageInSession.value[sessionId].push(obj.objectId)
   }
 
   const imageTrans = (content, maxWidth = 400, maxHeight = 300) => {
@@ -29,9 +38,10 @@ export const imageStore = defineStore('anyim-image', () => {
       let endIndex = item.indexOf('}')
       const objectId = item.slice(startIndex + 1, endIndex)
       const thumbUrl = image.value[objectId]?.thumbUrl
+      const originUrl = image.value[objectId]?.originUrl
       if (thumbUrl) {
         const imageHtml =
-          `<img class="image" alt="{${objectId}}" src="${thumbUrl}" ` +
+          `<img class="image" alt="{${objectId}}" src="${thumbUrl}" data-origin-url="${originUrl}" ` +
           `style="max-width: ${maxWidth}px; max-height: ${maxHeight}px; width: auto; height: auto;cursor: pointer;">`
         content = content.replaceAll(item, imageHtml)
       }
@@ -63,6 +73,7 @@ export const imageStore = defineStore('anyim-image', () => {
 
   return {
     image,
+    imageInSession,
     setImage,
     imageTrans,
     getImageFromContent

src/stores/message.js

@@ -157,7 +157,7 @@ export const messageStore = defineStore('anyim-message', () => {
     if (imageIds.size > 0) {
       mtsImageService({ objectIds: [...imageIds].join(',') }).then((res) => {
         res.data.data.forEach((item) => {
-          imageStore().setImage(item) // 缓存image数据
+          imageStore().setImage(sessionId, item) // 缓存image数据
         })
       })
     }

src/views/message/components/EmojiBox.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, watch } from 'vue'
-import { emojis } from '@/js/utils/emojis'
+import { emojis, getEmojiHtml } from '@/js/utils/emojis'
 
 const props = defineProps(['isShow'])
 const emit = defineEmits(['close', 'sendEmoji'])
@@ -44,14 +44,14 @@ const onSelectEmoji = (key) => {
 </script>
 
 <template>
-  <div class="emoji" v-show="isShowDialog" ref="elementRef" @click.self="close">
+  <div class="emoji-box" v-show="isShowDialog" ref="elementRef" @click.self="close">
     <el-tabs v-model="tabOption">
       <el-tab-pane class="emoji-container my-scrollbar" label="系统表情" name="system">
         <div
-          v-for="(item, key) in emojis"
+          v-for="key in Object.keys(emojis)"
           :key="key"
           class="emoji-item"
-          v-html="item"
+          v-html="getEmojiHtml(key)"
           @click="onSelectEmoji(key)"
         ></div>
       </el-tab-pane>
@@ -62,8 +62,8 @@ const onSelectEmoji = (key) => {
 </template>
 
 <style lang="scss" scoped>
-.emoji {
-  width: 465px;
+.emoji-box {
+  width: 472px;
   height: 240px;
   padding: 0 5px 0 5px;
   position: absolute;

src/views/message/components/InputEditor.vue

@@ -5,7 +5,7 @@ import { onMounted, onUnmounted, ref, watch } from 'vue'
 import { v4 as uuidv4 } from 'uuid'
 import { messageStore, imageStore } from '@/stores'
 import { ElMessage, ElLoading } from 'element-plus'
-import { emojis, emojiTrans } from '@/js/utils/emojis'
+import { emojiTrans, getEmojiHtml } from '@/js/utils/emojis'
 import { base64ToFile } from '@/js/utils/common'
 import { mtsUploadService } from '@/api/mts'
 import { el_loading_options } from '@/const/commonConst'
@@ -70,7 +70,7 @@ const getContent = async () => {
         const loadingInstance = ElLoading.service(el_loading_options)
         const res = await mtsUploadService({ file: file }) //上传图片至服务端
         loadingInstance.close()
-        imageData.setImage(res.data.data) // 缓存image数据
+        imageData.setImage(props.sessionId, res.data.data) // 缓存image数据
         content = content + `{${res.data.data.objectId}}`
       }
     }
@@ -168,7 +168,7 @@ const addEmoji = (key) => {
     index = 0
   }
 
-  quill.clipboard.dangerouslyPasteHTML(index, emojis[key])
+  quill.clipboard.dangerouslyPasteHTML(index, getEmojiHtml(key))
   quill.setSelection(index + 1, 0, 'user')
 }
 

src/views/message/components/MessageItem.vue

@@ -1,11 +1,12 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, onMounted, h, createApp } from 'vue'
+import { ElImage } from 'element-plus'
 import { WarningFilled } from '@element-plus/icons-vue'
 import { MsgType } from '@/proto/msg'
 import { userStore, messageStore, groupStore, groupCardStore, imageStore } from '@/stores'
 import { messageSysShowTime, messageBoxShowTime, jsonParseSafe } from '@/js/utils/common'
 import UserAvatarIcon from '@/components/common/UserAvatarIcon.vue'
-import { emojiTrans } from '@/js/utils/emojis'
+import { emojis } from '@/js/utils/emojis'
 
 const props = defineProps([
   'sessionId',
@@ -26,6 +27,67 @@ const groupData = groupStore()
 const groupCardData = groupCardStore()
 const imageData = imageStore()
 
+onMounted(() => {
+  const msgContent = document.querySelector(`#div-content-${msg.value.msgId}`)
+  if (msgContent) {
+    const vnode = renderComponent(msg.value.content)
+    const app = createApp({
+      render: () => vnode
+    })
+    app.mount(msgContent)
+  }
+})
+
+const renderComponent = (content) => {
+  if (!content) return h('div', [])
+  let contentArray = []
+  //匹配内容中的图片
+  content.split(/(\{.*?\})/).forEach((item) => {
+    //匹配内容中的表情
+    item.split(/(\[.*?\])/).forEach((item) => {
+      if (item) {
+        contentArray.push(item)
+      }
+    })
+  })
+
+  const elements = contentArray.map((item) => {
+    if (item.startsWith('{') && item.endsWith('}')) {
+      const imgId = item.slice(1, -1)
+      const url = imageData.image[imgId]?.originUrl
+      if (url) {
+        const srcList = imageData.imageInSession[props.sessionId].map(
+          (item) => imageData.image[item].originUrl
+        )
+        return h(ElImage, {
+          src: url,
+          alt: `{${imgId}}`,
+          fit: 'cover',
+          previewSrcList: srcList
+        })
+      } else {
+        return h('span', item)
+      }
+    } else if (item.startsWith('[') && item.endsWith(']')) {
+      const emojiId = `[${item.slice(1, -1)}]`
+      const url = emojis[emojiId]
+      if (url) {
+        return h('img', {
+          class: 'emoji',
+          src: url,
+          alt: emojiId,
+          title: item.slice(1, -1)
+        })
+      } else {
+        return h('span', item)
+      }
+    } else {
+      return h('span', item)
+    }
+  })
+  return elements
+}
+
 const msg = computed(() => {
   return messageData.getMsg(props.sessionId, props.msgId)
 })
@@ -402,12 +464,6 @@ const onClickSystemMsg = (e) => {
 const onResendMsg = () => {
   emit('resendMsg', msg.value)
 }
-
-const formatContent = (content) => {
-  let html = emojiTrans(content)
-  html = imageData.imageTrans(html)
-  return html
-}
 </script>
 
 <template>
@@ -460,7 +516,7 @@ const formatContent = (content) => {
                 <div v-if="myMsgIsRead" class="remote_read"></div>
                 <div v-else class="remote_unread"></div>
               </div>
-              <div class="div-content" v-html="formatContent(msg.content)"></div>
+              <div class="div-content" :id="`div-content-${msg.msgId}`"></div>
             </el-main>
           </el-container>
         </el-main>
@@ -492,7 +548,7 @@ const formatContent = (content) => {
               <span>{{ msgTime }}</span>
             </el-header>
             <el-main class="message-content">
-              <div class="div-content" v-html="formatContent(msg.content)"></div>
+              <div class="div-content"></div>
             </el-main>
           </el-container>
         </el-main>