构建时 .PNG 格式报错，无法构建

CosmoLau commented 3 weeks ago

Describe the bug

我想要迁移一个 gitbook 项目到 vitepress，但是项目中有大量的部分是在 Markdown 中通过 .png 来获取 .PNG 图片的，例如一张图片名为 example.PNG，在 Markdown 中通过以下方式调用：

![example](example.png)

此时通过 vitepress dev 是可以正常显示的，没有报错。但是在通过 vitepress build 进行构建时就会报错：

x Build failed in 649ms
✖ building client + server bundles...
build error:
RollupError: [vite:build-import-analysis] [plugin vite:build-import-analysis] example.PNG: Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .PNG file format, or if it's an asset, add "**/*.PNG" to `assetsInclude` in your configuration.
file: D:/Workspace/Docs/testBug/example.PNG
    at getRollupError (file:///D:/Workspace/Docs/testBug/node_modules/rollup/dist/es/shared/parseAst.js:379:41)
    at error (file:///D:/Workspace/Docs/testBug/node_modules/rollup/dist/es/shared/parseAst.js:375:42)
    at Object.error (file:///D:/Workspace/Docs/testBug/node_modules/rollup/dist/es/shared/node-entry.js:19409:20)
    at Object.error (file:///D:/Workspace/Docs/testBug/node_modules/rollup/dist/es/shared/node-entry.js:18519:42)
    at Object.transform (file:///D:/Workspace/Docs/testBug/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:66741:22)

Reproduction

添加一张 .png 格式的图片到项目中，并将其扩展名修改为 .PNG
在 Markdown 中通过 ![xxx](xxx.png) 的方法插入该图片
通过 vitepress build 命令进行构建

Expected behavior

如果这是一个 BUG，希望能在构建时通过。如果这不是一个 BUG，那么应该在 vitepress dev 时输出报错进行提醒。

System Info

System:
    OS: Windows 11 10.0.26090
    CPU: (12) x64 AMD Ryzen 5 3600X 6-Core Processor
    Memory: 17.21 GB / 31.95 GB
  Binaries:
    Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
    bun: 1.1.0 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (124.0.2478.19)
    Internet Explorer: 11.0.26090.1
  npmPackages:
    vitepress: ^1.0.2 => 1.0.2

Additional context

屏幕截图 2024-04-04 111124

Validations

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

brc-dd commented 3 weeks ago

You are on Windows which is a case-insensitive FS. If it was linux you would've got broken images on dev too. Run some script to batch rename .PNG to .png.

luyuan9870 commented 3 weeks ago

I'm using windows 11, It has the same problem,So what should be done?

luyuan9870 commented 3 weeks ago

Does the jpg format also have this problem?

brc-dd commented 3 weeks ago

It's not a problem with format. It's a problem with the name. Keep them as lowercase, they will work fine.

CosmoLau commented 3 weeks ago

I'm using windows 11, It has the same problem,So what should be done?

写一个脚本把所有图片的扩展名改成小写就行了，或者也可以用现成的工具，比如 renamer 包来批量修改扩展名。

如果 Markdown 里引入图片资源也是大写的，就用 VSCode 的查询替换功能，用正则表达式批量替换。

vuejs / vitepress