图片点击新标签打开

static/css/common.css

@@ -209,6 +209,17 @@
     font-size: 24px;
     margin-bottom: 10px;
 }
+.bigPic{
+    background: #ccc;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    display: none;
+    text-align: center;
+}
 /*客服聊天主板*/
 .chatLeft .el-tabs__nav,.chatRight .el-tabs__nav {
     margin-left: 20px;

static/html/chat_main.html

@@ -190,6 +190,11 @@
                     </div>
                 </el-col>
             </el-row>
+        <!--图片放大-->
+        <div id="bigPic" class="bigPic">
+            <img src="/static/images/3.jpg"/>
+        </div>
+        <!--//图片放大-->
     </template>
 </div>
 </body>

static/html/chat_page.html

@@ -136,7 +136,6 @@
             <div class="clear"></div>
         </div>
         <!--//客服代码-->
-
     </template>
 </div>
 </body>
@@ -206,7 +205,7 @@
                     let content = {}
                     content.avator = msg.avator;
                     content.name = msg.name;
-                    content.content =replaceContent(msg.content);
+                    content.content =replaceContent(msg.content,true);
                     content.is_kefu = false;
                     content.time = msg.time;
                     this.msgList.push(content);

static/js/functions.js

@@ -75,14 +75,24 @@ function replaceContent (content) {// 转义聊天内容中的特殊字符
         })
         .replace(/img\[([^\s\[\]]+?)\]/g, function (face) {  // 转义图片
             var src = face.replace(/^img\[/g, '').replace(/\]/g, '');;
-            return '<img  src="' + src + '" style="max-width: 100%"/>';
+            return '<img onclick="bigPic(src,true)" src="' + src + '" style="max-width: 100%"/></div>';
         })
         .replace(html(), '\<$1 $2\>').replace(html('/'), '\</$1\>') // 转移HTML代码
         .replace(/\n/g, '<br>') // 转义换行
 
     return content;
 }
-
+function bigPic(src,isVisitor){
+    if (isVisitor) {
+        window.open(src);
+        return;
+    }
+    // $("#bigPic img").attr("src",src);
+    // $("#bigPic").show();
+    // $("#bigPic img").click(function(){
+    //     $("#bigPic").hide();
+    // });
+}
 function filter (obj){
     var imgType = ["image/jpeg","image/png","image/jpg","image/gif"];
     var filetypes = imgType;