nuxt3_使用vant4实现v-html中图片的懒加载

目录

• 将富文本中img的src转换为data-src
• 引入指定的加载中图片与加载错误图片
• 将富文本挂载元素添加v-lazy-container

• vant4本身使用vue-lazyload插件实现图片的懒加载, 参照vue-lazyload进行配置

将富文本中img的src转换为data-src

const aboutHtml = computed(() => {
  const about = ($companyStore.about ?? '').replace(/\bsrc\b/g, 'data-src')
  return about
})

引入指定的加载中图片与加载错误图片

import loadimage from '~/assets/imgs/loading.gif'
import errorimage from '../assets/imgs/loadfail.png'

将富文本挂载元素添加v-lazy-container

<p
  class="content"
  v-html="aboutHtml"
  v-lazy-container="{ selector: 'img', error: errorimage, loading: loadimage }"
></p>