Local image parsing failed in markdown

[codersjj]

Describe the bug

When I use local images in markdown, they display properly during development, but after packaging the images fail to show.

I checked the dist directory and did not find the image files in there.

Reproduction

see: https://codesandbox.io/p/sandbox/islandjs-img-resolve-issue-xtprjj?file=%2Fisland-app%2Fdocs%2Farticle%2Fastro.md%3A5%2C11

Expected behavior

Package local images used in markdown correctly.

System Info

-

Additional context

No response

Validations

• Read the docs
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[sanyuan0704]

You should add a leading slash in the image path

[codersjj]

You should add a leading slash in the image path

Suppose my current directory structure is like this:

.
└── docs
    └── article
        └── a
            └── b
                ├── c
                │   └── kitten.png
                └── demo.mdx

then in demo.mdx I use ![kitten](./c/kitten.png) to import an image.

It can display the image normally in development environment, but fails to display the image in production environment. I checked the dist directory after build, and did not find the corresponding image file in it.

[codersjj]

Currently, I use images in mdx by importing the image files and combining them with <img> elements. Like this:

import kittenImg from './c/kitten.png'

<img src={kittenImg} alt="kitten.png" />

This allows the images to be displayed properly after bundling.