Invalid assets URL in dev mode
Elliot67 opened this issue · comments
Describe the bug
In development mode, assets inside the src/assets folder cannot be imported from components.
Explanation
Importing an image with <img src="/assets/icon.svg" /> will resolve to <img src="/assets/icon.svg" /> instead of <img src="http://localhost:3303/assets/icon.svg" />.
When the app is builded, the image will resolve to /dist/assets/icon-03081ed2.svg which works.
The provided example inside src/options/Options.vue currently only works because the same file exists in the extension/assets folder.
Note :
- The same problem also occurs with CSS import :
url('/assets/roboto.woff2')
Possible solutions
- Force Vite to use a full path instead of the relative one for assets
- Use the
<base>tag tohttp://localhost:3303/and remove it at build time
Reproduction
Rename src/assets/icon.svg to something else and fix the import inside src/options/Options.vue
System Info
Windows & ChromeUsed Package Manager
yarn
Validations
- Follow our Code of Conduct
- Read the Contributing Guide.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
- The provided reproduction is a minimal reproducible of the bug.
I have also encountered this problem, how to solve it?
@chen99-long , I worked around the issue by adding the <base href="http://localhost:3303/" /> tag in the <head> of my options & popup html pages. Vite seems to remove the tag at build time but it can create other issues depending on your extension.
I think the proper fix should be done inside the Vite configuration directly.
Thank you very much
Facing the same issue at the moment even on a completely new project. @antfu is this a known issue?
same issues