VUE3使用v-md-editor 模仿小程序文档锚点定位阅读功能解决图片不显示问题

Kooklen_xh

于 2022-02-10 15:41:14 发布

阅读量1.8k

点赞数

文章标签：小程序 html css3

本文链接：https://blog.csdn.net/weixin_40857648/article/details/122861862

版权

本文档介绍了如何在Vue3中使用v-md-editor实现类似小程序的锚点定位阅读功能，并解决了Markdown中图片无法显示的问题。通过正确配置和引入v-md-editor，将Markdown文件存放在public目录下避免图片被webpack处理，从而成功展示带图片的Markdown内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

读取MD折腾了三天，搞完觉得还是简单的

http://ckang1229.gitee.io/vue-markdown-editor/zh/
这个开发者的文档写的还算清楚
第一步（不要装错版本了）
在这里插入图片描述
main.ts注册

但是我的eslint发生报错了
这个只解决了一半还有两个通过ignore解决也没发现问题

群里看到的图
这好像是开发者回复。

我是只是用展示的功能，就这么导入的
在这里插入图片描述

上面的代码是锚点定位的，下面是展示的

附上官方使用方式

<template>
  <div>
    <div
      v-for="anchor in titles"
      :style="{ padding: `10px 0 10px ${anchor.indent * 20}px` }"
      @click="handleAnchorClick(anchor)"
    >
      <a style="cursor: pointer">{
   {
    anchor.title }}</a>