目錄

• vue h5 端實現富文本圖片預覽（基於 Vant UI 的 ImagePreview 組件）
  • 預覽效果
  • 關鍵代碼
  • 使用案例

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>

效果就是最前面那張動圖。