Invalid assets URL in dev mode

Elliot67 commented 1 year ago

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 to http://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 & Chrome

Used Package Manager

yarn

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guide.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
[X] The provided reproduction is a minimal reproducible of the bug.

chen99-long commented 10 months ago

I have also encountered this problem, how to solve it?

Elliot67 commented 10 months ago

@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.

chen99-long commented 10 months ago

Thank you very much

sgarcia-dev commented 9 months ago

Facing the same issue at the moment even on a completely new project. @antfu is this a known issue?

QC2168 commented 9 months ago

same issues

antfu-collective / vitesse-webext