The image rendered by rich text realizes the preview function

When we use rich text, most of them will store pictures, and sometimes we will use the function of previewing large pictures when the page is echoed. Here we use the ImagePreview component that comes with element-ui to implement it. Since the img element is rendered by v-html, we cannot bind click events to it, nor can we directly use the ImagePreview component, so we need to make some small changes to achieve this Function.

Here the ImagePreview v-show is set to false, only the preview page of the component is used here, and the image display uses v-html to render the img,

<div v-html="logText" class="log-text-class" @click="replayImgShow($event)"></div>
<ImagePreview :src="previewSrc" ref="imagePreview" v-show="false"></ImagePreview>

data() {
  return {
   //图片预览src
   previewSrc:'',
   //富文本html
   logText:''
	}
 }

1. Binding click event

The event delegation of js is used here. The div of .log-text-class is the parent element of img. Since the img element rendered by v-html cannot set the click event, we can bind the click event of the parent element, and then according to the click event to get the element that was actually clicked.

event delegation

Event delegation is a knowledge skill that uses the characteristics of event flow to solve some development requirements

• Advantages: Reduce the number of registrations and improve program performance

• Principle: Event delegation is actually using the characteristics of event bubbling

  • Register an event for the parent element. When we trigger the child element, it will bubble up to the parent element, thereby triggering the event implementation of the parent element: event object.target.tagName can get the element that actually triggers the event

//显示大图
replayImgShow(e){
  this.previewSrc='';
  if(e.target.tagName=='IMG'){
    this.previewSrc=e.target.currentSrc;
    let obj=this.$refs.imagePreview;
    //调用组件自定义方法，模拟组件点击事件
    obj.click()
  }
},

2. Set img style

/* v-html渲染的元素样式，用/deep/才会生效 */
.log-text-class /deep/ img {
 //设置富文本图片宽高
  width: 50%;   
  height: 50%;
}

3. ImagePreview component changes

Changes to the ImagePreview component (the image preview component that comes with the ImagePreview component elements-ui)

1. Add ref to el-image to facilitate subsequent access to elements to simulate click events

<template>
  <el-image
    //这里添加ref
    ref="image"  
    :src="`${realSrc}`"
    fit="cover"
    :style="`width:${realWidth};height:${realHeight};`"
    :preview-src-list="realSrcList"
  >
    <div slot="error" class="image-slot">
      <i class="el-icon-picture-outline"></i>
    </div>
  </el-image>
</template>

2. Add a custom click() method

methods:{
   click(){
     //显示预览大图
     this.$refs.image.showViewer = true
     //模拟点击事件，触发查看大图功能
     this.$refs.image.clickHandler()
   }
}

4. There are problems

Since the rich text input box supports copying and pasting of pictures, the copied and pasted pictures are not stored in the rich text html in the form of url, but are stored in base64 format, which will cause the picture to fail to open when previewing.

solution:

//显示大图
replayImgShow(e){
  this.previewSrc='';
  if(e.target.tagName=='IMG'){
    let str=e.target.currentSrc;
    let str1=str.split(",");
    /*复制粘贴的图片是已base64图片存储的，需要特殊处理*/
    if (str1[0]==="data:image/png;base64"){
      this.previewSrc="base64:"+str1[1];
    }else {
      this.previewSrc=str;
    }
    let obj=this.$refs.imagePreview;
    obj.click()
  }
},

ImagePreview component changes added  

    if (item.substring(0,7)==="base64:"){

           return srcList.push("data:image/png;base64,"+item.substring(7));

        }

    realSrcList() {
      if (!this.src) {
        return;
      }
      let real_src_list = this.src.split(",");
      let srcList = [];
      real_src_list.forEach(item => {
        /*复制粘贴的图片是已base64图片存储的，需要特殊处理*/
        if (item.substring(0,7)==="base64:"){
           return srcList.push("data:image/png;base64,"+item.substring(7));
        }
        if (isExternal(item)) {
          return srcList.push(item);
        }
        return srcList.push(process.env.VUE_APP_BASE_API + item);
      });
      return srcList;
    },