vue h5 端实现富文本图片预览（基于 Vant UI 的 ImagePreview 组件）

Z时代
2024-01-10
分类：综合

vue

vue h5 端实现富文本图片预览（基于 Vant UI 的 ImagePreview 组件）
- 预览效果
- 关键代码
- 使用案例

之前发了一篇博客讲了如何在小程序实现富文本的图片预览，本篇博客来讲讲如何在 H5 端实现同样的体验与效果

代码是基于之前微信小程序封装那套代码改写的，用户体验一致

参考文章：Vant 实现预览富文本图片

注意：项目里要引入 Vant UI 组件库（需自行引入好在开始看后面的内容）

预览效果

关键代码

src/utils/util.js

/**
 * 从富文本中给图片链接添加 random 并且返回图片数组
 * @example let [html, imgUrls] = addRandomAndGetPreviewImageUrlsFromRichText(html)
 * @param {string} html 
 */
// function addRandomAndGetPreviewImageUrlsFromRichText (html) {
const addRandomAndGetPreviewImageUrlsFromRichText = html => {
    // 如果没有值的话，直接返回
    if (!html) {
        return html
    }
    let randomIndex = 0
    let imgUrls = []
    // 先匹配到 img 标签，放到 match 里
    html = html.replace(/<img[^>]*>/gim, function(match) {
        randomIndex++
        match = match.replace(/src="[^"]+"/gim, function(match) {
            // 再匹配到 src 标签 '"'
            let src = match.slice(5, -1) + "?random=" + randomIndex // 取到 src 里面的 url
            imgUrls.push(src)
            return 'src="' + src + '"'
        }).replace(/src='[^']+'/gim, function(match) {
            // 再匹配到 src 标签 "'"
            let src = match.slice(5, -1) + "?random=" + randomIndex
            return "src='" + src + "'"
        })
        return match
    })
    return [html, imgUrls]
}
module.exports = {
    addRandomAndGetPreviewImageUrlsFromRichText: addRandomAndGetPreviewImageUrlsFromRichText,
}

使用案例

xxx.vue

<template>
	<div v-html="html" class="h5-html" @click="previewImage($event)"></div>
</template>
<script>
    import util from '@/utils/util'
    import { ImagePreview } from 'vant'
    export default {
        mounted() {
            let htmlStr =
                '<p>这一整块都是富文本</p><img src="https://www.coveycity.com/upload/businessMap/img/movie.png"><p>科技城五渠塘水库以北</p><p><img src="http://www.coveycity.com:1433/upload/businessMap/20210306/df49ddd7c34d471a83c172de553beede.jpg"></p>'
            ;[this.html, this.richImages] = util.addRandomAndGetPreviewImageUrlsFromRichText(htmlStr)
            console.log(this.richImages, 'this.richImages')
        },
        methods: {
            previewImage(e) {
                // console.log(e, 'e')
                if (e.target.tagName == 'IMG') {
                    ImagePreview({
                        images: this.richImages,
                        startPosition: e.target.src.split('random=')[1] - 1,
                        closeOnPopstate: true //页面回退关闭预览
                    })
                }
            }
        }
    }
</script>
<style>
    .h5-html {
        width: 100%;
        background-color: cadetblue;
        padding: 20px 0;
    }
    .h5-html img {
        width: 100%;
    }
</style>