图片懒加载未生效

[11003]

描述这个Bug

版本号：

"markdown-it-image-figures": "^2.1.1",
"md-editor-v3": "^4.17.4",

<script setup>
    import { MdPreview, MdCatalog, config } from 'md-editor-v3'
    import 'md-editor-v3/lib/preview.css'
    import ImageFiguresPlugin from 'markdown-it-image-figures'

    config({
        markdownItConfig: (mdit) => {
            mdit.use(ImageFiguresPlugin, { lazy: true, async: true, figcaption: true })
        }
    })

    const props = defineProps({
        /**
         * 服务器渲染必需
         */
        contentId: {
            type: [String, Number],
            required: true,
            default: () => ''
        },
        /**
         * 内容
         */
        markdownContent: {
            type: String,
            required: true,
            default: () => ''
        }
    })

    /**
     * 是否存在文章目录
     */
    const showToc = ref(false)
    function onGetCatalog(catalog) {
        showToc.value = !!catalog.length
    }

    /**
     * toc item 点击滚动
     */
    const scrollElement = ref()
    if (import.meta.client) {
        scrollElement.value = document.documentElement
    }
</script>
<template>
    <div v-show="props.markdownContent" class="renderBox" :class="{ showTocA: showToc }">
        <MdPreview @onGetCatalog="onGetCatalog" noMermaid noKatex class="custom-markdown" v-model="props.markdownContent" :editor-id="`pv-${props.contentId}`" />
        <div v-show="showToc" class="toc">
            <MdCatalog class="renderToc" :editorId="`pv-${props.contentId}`" :scrollElement="scrollElement" :scrollElementOffsetTop="80" />
        </div>
    </div>
</template>

版本号

20.16.0

问题重现链接

https://liuhai.work/post/43

[imzbf]

{
  lazy: true,
+  removeSrc: true,
  async: true
}

另外，内部使用了markdown-it-image-figures，你应该通过config去修改option

config({
  markdownItPlugins(plugins, { editorId }) {
    return plugins.map((item) => {
      if (item.type === 'image') {
        return {
          ...item,
          options: {
            ...item.options,
+         ...your options
          }
        };
      }

      return item;
    });
  },
})

[11003]

    config({
        markdownItPlugins(plugins) {
            return plugins.map((item) => {
                if (item.type === 'image') {
                    return {
                        ...item,
                        options: {
                            ...item.options,
                            lazy: true,
                            async: true,
                            classes: 'lazy'
                        }
                    }
                }
                return item
            })
        }
    })