themeselection / materio-mui-nextjs-admin-template-free

An enterprise-grade Next.js admin dashboard template. Made with developer experience first: Next.js v14 (App Router), Material UI (MUI), Tailwind CSS, TypeScript, ESLint, Prettier, VSCode Configs !! 🚀
https://themeselection.com/item/materio-free-mui-nextjs-admin-template
MIT License
1.63k stars 562 forks source link

images are not displayed when app is not installed in web root. #17

Closed skang closed 9 months ago

skang commented 1 year ago

Steps to reproduce

step 1: modify "next.config.js" as below to install app to a different path:

.... module.exports = { basePath: "/apps/materio", ...

step 2: run "npm run build" step 3: run "npm run export" step 4: publish app to web server (mine is powered by "nginx") by copying "out" folder to directory that maps to url path of "/apps/materio"

What is expected?

access materio app with URL: "https://localhost/apps/materio/index.html", it should work without problem. Specifically all components with images should display properly.

What is actually happening?

images in components of Materio app do not show up.

Additional data

neelbrahmakshatriya commented 9 months ago

Hi @skang,

This might be solved by adding the basePath in your images before making a production build.

For example, if you have written /images/my-image.png as your image source, you must update this path as /apps/materio/images/my-image.png. Another method is to set an environment variable in your .env file like BASE_PATH=/apps/materio and update image paths as:

`${process.env.BASE_PATH}/images/my-image.png`

We have not used the second method, but it probably should work.

You may refer to the official Next.js docs on the basePath.

Please let me if you have any further queries.

github-actions[bot] commented 9 months ago

This issue has been automatically marked as stale because it has no recent activity. It will be closed if no further activity occurs. Thank you for raising the concern.

github-actions[bot] commented 9 months ago

This issue has been automatically marked as closed because it has no recent activity.