[Need help] How to add images? about vite-plugin-react-pages HOT 4 CLOSED

I have updated a demo to show how to embed a vite-pages project into a sub-folder. Notice I pass root as cli argv so I can put the vite config into the pages directory. You can also set outDir and base in the vite config. Hopefully this will answer your question.

The demo also shows how to import image.

You need to upgrade to [email protected] or above.

from vite-plugin-react-pages.

(re:)

Thanks for the timely help! Using vite <my-root-path> is very handy and neat in this case.

Well, there's a problem in the demo (custom-find-pages2): I tried npm run build (or pnpm run build) within the demo folder, and from what was served, I noticed that the img-src for markdown link is different from that of jsx on the same page. The ![]() way does not show the image. Below is the screenshot. Notice it works well when npm run dev.

Thought there could be different url-resolving logic for now.

• Would it be helpful if setting publicDir in vite.config.ts?

from vite-plugin-react-pages.

@pkubangbang I just added the "local image in markdown" support yesterday. Did you run git pull and pnpm i(which re-build the packages, otherwise your local demos will use the older build) at the root folder again?
It works fine for me.

Would it be helpful if setting publicDir in vite.config.ts?

Actually the "local image in markdown" is supported by a mdx plugin that transform ![](./local.png) into:

import _img0 from "./local.png"; 
<img src={_img0} />

So the markdown syntax works in the import + jsx way (not the static assets way!). So it is not related to publicDir.

from vite-plugin-react-pages.

It works!

Yeah, I accidentally run pnpm install on the sub-project, so the dependencies were not fully updated. Running it on root folder solved the problem.

Thanks for your help! And I would close this thread now.

from vite-plugin-react-pages.