island.js icon indicating copy to clipboard operation
island.js copied to clipboard

Local image parsing failed in markdown

Open codersjj opened this issue 2 years ago • 3 comments

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.

image

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.

codersjj avatar Aug 04 '23 09:08 codersjj

You should add a leading slash in the image path

sanyuan0704 avatar Aug 08 '23 02:08 sanyuan0704

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 avatar Aug 08 '23 07:08 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.

codersjj avatar Aug 11 '23 03:08 codersjj