Realize the preview of pictures in vue3+vite

Foreword:

        Better display of image preview in vue3+vite, recommended here: v-viewer, but note that the version of vue3 has been updated, so the command has also changed

Realize the effect:

Steps for usage:

1. You can install npm/cnpm/pnpm/yarn, and install the following plug-ins

 v-viewer@next

2. Configuration in main.js 

// 图片查看工具
import Viewer from 'v-viewer';
import 'viewerjs/dist/viewer.css';

const app = createApp(App);
app.use(Viewer, {
  Options: {
    'inline': true,
    'button': true, //右上角按钮
    'navbar': true, //底部缩略图
    'title': true, //当前图片标题
    'toolbar': true, //底部工具栏
    'tooltip': true, //显示缩放百分比
    'movable': true, //是否可以移动
    'zoomable': true, //是否可以缩放
    'rotatable': true, //是否可旋转
    'scalable': true, //是否可翻转
    'transition': true, //使用 CSS3 过度
    'fullscreen': true, //播放时是否全屏
    'keyboard': true, //是否支持键盘
    'url': 'data-source',
  },
});

3. Page usage:

1) Use the v-view directive

<div v-viewer>
    <img
        :key="props.message.util_attachment.image_url"
        :src="props.message.util_attachment.image_url"
    />
</div>

2) Wrap the picture with viewer

<viewer :images="images">
  <img v-for="src in images" :key="src" :src="src">
</viewer>

4. Problem sorting:

If the image data is not obtained at one time, there will be problems with displaying the image by default

this.$viewer.update()
this.$viewer.view(index) // 预览当前图片，index是你图片的下标