island.js
island.js copied to clipboard
Local image parsing failed in markdown
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
- [X] Read the docs
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
You should add a leading slash in the image path
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  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.
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.