So if you build and deploy React app with Vite, internally you will be using imports for bringing images around between components and so and Vite will take care of streamlining your url management, right?
But in some cases (the favicons being the simplest example), you end up using the public dir and placing your assets files in there so they're not processed as explained in the docs here and then you just link to them with absolute paths (taking the public folder as the root, so to say).
I've bumped onto such a case.
I have a component that, due to stylistic reasons, assigns a mask styling to an element, which requires the use of dynamic urls. So I resorted to using template literal syntax for that, but for obvious reasons I cannot bring the (each!) import.
Tried this code:
export default function myComp({urlForMask}) {
return <div style={{ mask: `url(/base-path-here/${urlForMask}-smth.svg)` }}></div>
}
Now, that code above (after many diverse attempts of all sorts) works, but it has one big disadvantage in my opinion, which is that if the URL changes in the future, I will have to remember to change it in at least two places (the base in vite.config.js and here, in this component) or else it will break.
NOTE: I forgot to mention, I had to change the base as specified in the docs since it's a repo-based url.
I tried using the import.meta.url way, also suggested in the docs, in the same page linked further above, but logging that outputs some insanely long string that starts with data:image/svg+xml... and that does not render nothing in production.
Tried and experimented with publicDir but it didn't change anything in my use case.
Tried changing "homepage" in "package.json" and found no change.
What I'd like to achieve is either being able to reference the base configured in vite.config.js inside my component (in the template literal shown above), in order to build this url OR otherwise being able to write my URL template literal in a way that doesn't require to MANUALLY type the base path. Why?
My assumption was that it would also work like the favicon, in that it simply uses an href="/favicon.svg" from the html, the thing being the dist folder contains the html file and the public assets, whereas the js bundle lives inside dist/assets, and Vite docs state that you must use absolute path to your public asset (so I can't do ../blahblah).
Hope I've given enough info and context so you can point me what wrong assumption or misunderstanding I am having. But if I haven't, please give me a hint of anything else I should mention. Most of all, I appreciate your time taken on giving me any insight or pointer.
I had a similar problem. From what I understood, your images are not served from the public directory. In my case, I hosted on vercel, and they have an annoying feature that, to import an image in code, and referencing the image as part of the code itself, you need to specify its location in the project just as you do with normal files. But when you specify it as a string, like in the image source, you need to specify the location on the build. So you had to write something like src="/image.png", without specifying that it comes from the public directory. But for Github Pages it might be different so I suggest you look at its resulting build, and if you don't find it on GitHub you can always search in DevTools.
I didn't quite understand the problem with base though. Can't you just specify base in env, and just use it everywhere? By the way, I don't think you need a starting slash before the base. From the docs, you provided, base should be a base URL (like https://example.com), and placing a slash before it would likely break the source. Or try just using /image.png without base at all. In my case, I didn't need to provide a full URL.
On a side note, if you have special characters they need to be escaped, or use quotation marks.