rewrite asset urls in template to use vite asset hashes

[dominikg]

Describe the problem

when using <img src="./foo.jpg"> in svelte component template, the image has to be put in publicDir and isn't hashed by vites asset pipeline.

see this discussion in svelte discord: https://discord.com/channels/457912077277855764/819723698415599626/868424304042319892

Describe the proposed solution

build a preprocessor to do the following:

1. extract possible asset urls
2. filter extracted with vites asset_include
3. rewrite url
   a) figure out vite hash of the asset and put hashed url in src
   b) add import x from "<url>" and rewrite src to <img src={x}> ( see https://github.com/bluwy/svelte-preprocess-import-assets)

add an option to inject that preprocessor within vite-plugin-svelte (like the others it's already doing)

Note: 3b would have the advantage that we don't need to figure out asset hashes as vite is going to rewrite the import down the road.

Alternatives considered

• could be implemented as a separate vite plugin with api.sveltePreprocess aswell 🤔
• direct people to use https://github.com/bluwy/svelte-preprocess-import-assets

Importance

nice to have

Additional Considerations (see Discussion)

• Interoperability with vite-plugins like vite-plugin-image and svelte-preprocessors
• Configurability (ability to include/exclude assets from being processed)

[benmccann]

3b also would probably work with vite-plugin-image which is important

Could I exclude an image with asset_exclude or by providing absolute URL?

Is this a preprocessor or done with the existing plugin resolve mechanism?

[dominikg]

3b also would probably work with vite-plugin-image which is important

This is a good point, interoperability with vite-plugins and other svelte preprocessors should be a goal here

Could I exclude an image with asset_exclude or by providing absolute URL?

unfortunately i don't think there is asset_exclude in vite , only include https://vitejs.dev/config/#assetsinclude
but again great point. Needs to be configurable to enable raw usage

Is this a preprocessor or done with the existing plugin resolve mechanism?

hmm, not sure how plugin resolve could work here even if we resolved the asset, we could'nt recompile the svelte component after the fact. so it has to either import the final urls from elsewhere (3b) or have them injected at compile time (which would need to know the hash in advance during build)

[benmccann]

I just got vite-imagetools working on my site so that it serves avif, webp, or the original jpg/png.

I had to do a couple things. I had to import with a special Vite URL. I had the format parameter appended to each include the original format. I also had to create an Image component that would provide a picture element with a child element for each format.

The code looks like this:

<script>
import C3 from '$img/c3-logo-alpha.png?format=avif;webp;png&meta';
import Image from '$lib/Image.svelte';
</script>
<Image src={C3} width="262" height="68" alt="C3 Ventures" />

I setup the $img alias for ease of use: https://kit.svelte.dev/faq#aliases

[lunacd]

Yeah I feel like integration with vite-imagetools is very nice to have, given that things like svelte-image isn't working with SvelteKit out of the box.

We could have it so that this integration is automatically enabled if an img directory is detected. That, of course, can be explicit enabled or disabled in config.

[bluwy]

What would be the ideal syntax for imagetools integration in svelte be then? Would it be similar to svelte-image, but instead for imagetools?

Anyways, I don't think the change should be in vite-plugin-svelte. Instead vite-imagetools can use use vite-plugin-svelte's api to add a custom preprocessor to achieve svelte-image's syntax. Docs.

[bluwy]

Tested using svelte-preprocess-import-assets with SvelteKit today and everything seems to be working fine. It should work on a normal Vite project too as that preprocessor only transforms inline asset sources to JS imports, which had always worked before.

Re imagetools, I don't think it's something we want to integrate first-party, there could be multiple image solutions in the future and siding on imagetools is a bit unfair. Instead, imagetools could publish a svelte preprocessor which can provide a similar syntax and ergonomics as svelte-image. It probably won't need svelte-preprocess-import-assets as well.

I'm closing this issue for now.

[LiHDong]

When using svelte-preprocess-import-assets as a preprocessor of @sveltejs/vite-plugin-svelte , I found that it will throw an exception in the SFC file with scss style or typescript script becuase of improper invoking svelte parse method before scss and typescript have been processed.To solve the problem, I have to sequence the processor(svelte-preprocess and svelte-preprocess-import-assets) with svelte-sequential-preprocessor, which is a little redundant. So I want to ask is there a more reasonable way to solve the incorrect calling order issue.

[bluwy]

@LiHDong That's unfortunately a limitation with the current way Svelte applies preprocessor. There's an RFC to improve this, but at the meantime the sequential-preprocessor is needed to workaround this.. I'll add this info in the svelte-preprocess-inport-assets readme as well. Thanks! (Added)