Compiled a wrong asset path(‘/base/’ prefix) in the development environment

[imafee]

Describe the bug

When I:

• installed 'vitepress v1.0.0-rc.25' and executed 'npm run docs: dev', any image displayed normally.
• installed 'vitepress v1.0.0-rc.26' and executed 'npm run docs: dev', any image displayed a 404 error. After manually adding the prefix {vitepressconfig. base} before the path of the image in the domElementPanel(devtool), it displayed normally.

The problem of compilating wrong assets path does not have any issues in production environment (when you 'npm run docs: build' and 'npm run docs: preview'), only occurs in the development environment.

Reproduction

Init project

npm i -D vitepress@vitepress v1.0.0-rc.26
npx vitepress init
/* choosed this options
Where should VitePress initialize the config? "./docs"
Theme: Default Theme (Out of the box, good-looking docs)
*/

Create directory structure

docs/
   .vitepress/
      config.mts
   assets/
      image/
        cat.png
   index.md

Add base property in .vitepress/config.mts

import { defineConfig } from "vitepress";
export default defineConfig({
base:'/base/'
})

Add a image in index.md
![cat](/assets/image/cat.png)

Start development environment
npm run docs:dev

Then， in the network-panel（chrome dev-tool） you will find that the image request is 404.
open the dom-panel and modify the image path from '/assets/image/cat. png' to '/base/assets/image/cat. png', it will be normal.

However, if you install vitepress@vitepress V1.0.0-rc.25, everything is normal. It seems that there has been a breaking-change in the asset path compilation, but I did not see it in the CHANGLOG.

Expected behavior

In the development environment

/base/assets/image/cat.png`   // it's wrong,please don't compile to this
/assets/image/cat.png   // it's correct!

System Info

System:
    OS: macOS 13.6.1
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Memory: 1.97 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
Browsers:
    Chrome: 119.0.6045.159
    Edge: 119.0.2151.72
    Safari: 17.1
npmPackages:
    vitepress: ^1.0.0-rc.29 => 1.0.0-rc.29`

Additional context

I really want to fix this issue, but I can't located yet😢 ...

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

/base/assets/image/cat.png // it's wrong, please don't compile to this

That is correct actually. Even in rc.25 after build you'll get paths like /base/assets/cat.hash.png.

In rc.26 we switched to vite 5, which disallows serving files outside base (vitejs/vite#5657). This is also correct behavior IMO.

The inconsistency in dev and build should be fixed though. In the meantime, please use relative paths -
![cat](./assets/image/cat.png)

[imafee]

I may not have explained the main point of problem clearly 😢

Whether in rc.25 or rc.26, the image resource path will be compiled as the correct(same) result:

• code '/sets/image/cat. png'
• compiled as'/sets/image/cat. png 'in the development environment,
• compiled as'/base/sets/cat. hash. png' in the product environment.
• I don't put the assets outside the docs folder(/docs/assets/image/cat.png)

But, In the development environment, they behave differently:

• rc.25 can display normally,
• rc.26 reports a 404 error.

[brc-dd]

Yeah, I understood your problem.

The issue is vite 4 (rc 25) served docs/assets/image/cat.png at both /assets/image/cat.png and /base/assets/image/cat.png. But vite 5 (rc 26) only serves it at /base/assets/image/cat.png. See the linked PR in my above comment. The build (production) behavior is not affected by that.