Element UI’s image component, el-Image, has a large image preview function, which can be enabled with previewSrcList:

<el-image 
    style="width: 100px; height: 100px"
    :src="url" 
    :preview-src-list="srcList">
</el-image>
Copy the code

el-image-viewer

The large image preview is a separate component, image-viewer, so we can use it separately:

The props:

props: {
    urlList: {
        type: Array.default: () = >[]},zIndex: {
        type: Number.default: 2000
    },
    onSwitch: {
        type: Function.default: () = >{}},onClose: {
        type: Function.default: () = >{}}}Copy the code

I’m just going to focus on urlList and onClose.

Use:

1. Import components and register:

import ElImageViewer from "element-ui/packages/image/src/image-viewer";
Copy the code
components: {
    ElImageViewer
}
Copy the code

2, the template:

<el-image-viewer
    v-if="showViewer"
    :on-close="closeViewer"
    :url-list="[viewUrl]">
</el-image-viewer>
Copy the code

3, the script:

data() {
    return {
      showViewer: false.viewUrl: "".// Image preview address
    };
},
methods: {
    closeViewer() {
        this.showViewer = false;
    },
    goRead() {
        // ...
        if (['.png'.'.jpg'.'.gif'.'.jpeg'.'.webp'].indexOf(file.format) > -1) {
            this.viewUrl = file.downUrl;
            this.showViewer = true;
        }
        // ...}}Copy the code