[Bug report] after setting base, vite failed to handle assets with absolute paths in dev mode

[WangJincheng4869]

Description

当配置 base 后不会处理图片地址，导致图片无法显示

Reproduction

https://stackblitz.com/edit/vuepress-theme-hope-4jgewz?file=docs%2Fdemo%2FREADME.md,docs%2F.vuepress%2Fclient.ts,docs%2F.vuepress%2Fconfig.ts

Used Package Manager

pnpm

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 14.43 GB / 31.56 GB
  Binaries:
    Node: 20.9.0 - D:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 9.2.0 - D:\Users\jcwang\AppData\Roaming\npm\npm.CMD
  Utilities:
    Git: 2.43.0.
  Browsers:
    Chrome: Not Found
    Edge: Chromium (119.0.2151.72)
  npmPackages:
    @vuepress/bundler-vite: 2.0.0-rc.0 => 2.0.0-rc.0
    @vuepress/bundler-webpack: Not Found
    @vuepress/cli: Not Found
    @vuepress/client: 2.0.0-rc.0 => 2.0.0-rc.0
    @vuepress/core: Not Found
    @vuepress/markdown: Not Found
    @vuepress/plugin-active-header-links: Not Found
    @vuepress/plugin-back-to-top: Not Found
    @vuepress/plugin-container: Not Found
    @vuepress/plugin-docsearch: Not Found
    @vuepress/plugin-external-link-icon: Not Found
    @vuepress/plugin-git: Not Found
    @vuepress/plugin-google-analytics: Not Found
    @vuepress/plugin-medium-zoom: Not Found
    @vuepress/plugin-nprogress: Not Found
    @vuepress/plugin-palette: Not Found
    @vuepress/plugin-prismjs: Not Found
    @vuepress/plugin-pwa: Not Found
    @vuepress/plugin-pwa-popup: Not Found
    @vuepress/plugin-register-components: 2.0.0-rc.0 => 2.0.0-rc.0
    @vuepress/plugin-search: Not Found
    @vuepress/plugin-shiki: Not Found
    @vuepress/plugin-theme-data: Not Found
    @vuepress/plugin-toc: Not Found
    @vuepress/shared: Not Found
    @vuepress/theme-default: Not Found
    @vuepress/utils: Not Found
    vue: ^3.3.9 => 3.3.9
    vue-loader: Not Found
    vue-router: ^4.2.5 => 4.2.5
    vuepress: 2.0.0-rc.0 => 2.0.0-rc.0
    vuepress-vite: Not Found
    vuepress-webpack: Not Found

[Mister-Hope]

cc @meteorlxy A real repro here: https://stackblitz.com/edit/vuepress-theme-hope-pbl7xt?file=package.json,README.md

Seems to be a serious bug.

From our docs, the base should be appended.

[WangJincheng4869]

这个问题降级 vuepress 是没有用的，只能降级 vite 到 4 ，无法使用 vite 5

使用 vite 4 时，虽然没有在图片 src 中添加 base，但是可以正常显示图片

使用 vite 5，图片中的 src 也没有添加 base，就无法显示图片

[Mister-Hope]

Can you provide details with production? The above information is devServer.

[WangJincheng4869]

Can you provide details with production? The above information is devServer.

我将你的复现换成了 vite4，图片可以正常显示了 https://stackblitz.com/edit/vuepress-theme-hope-umxnhe?file=package.json,docs%2FREADME.md

[WangJincheng4869]

经过测试 build 后的结果是正常的，添加上了 base，这个问题只是在 dev 环境下存在

[Mister-Hope]

cc @meteorlxy

[XiSenao]

The parsing template is not provided to Vite for parsing, and the processing process of Vite should be as expected. It seems that markdown-it does not support base URL, so I think it may be more appropriate to implement a similar plugin for markdown-it.

[meteorlxy]

Maybe we can port the fix https://github.com/vuejs/vitepress/issues/3239

[meteorlxy]

The current fix only works on vite. A better solution might be a markdown-it plugin as @XiSenao proposed.

--- update

For webpack, you can enable markdown.assets.absolutePathPrependBase to handle image base automatically.