Automatically static asset handling

[alkorlos]

Describe the problem

In Svetle, basic and important functionality from Vite doesn't work — automatic handling of static resources from component folder only using HTML.

When initializing a new project in Svelte, there will be such lines:

<script>
  import svelteLogo from './assets/svelte.svg'
</script>

<img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />

It works, but I would like to have the ability to use notation like native HTML:

<img src="./assets/svelte.svg" class="logo svelte" alt="Svelte Logo" />

But this does not work.

In the documentation for Svelte and SvelteKit, I found information about this only in one place, in SvelteKit Images (I didn't find anything in the Svelte documentation on this topic). It says that when working with static resources, Svelte uses the Vite mechanism, which optimizes images: hashing in the name and assetsInlineLimit.

But in Vite, both methods work: importing in JS and specifying the path directly in src , and both trigger the optimizations mentioned above.

Documentation Vite Static Asset Handling about this:

Common image, media, and font filetypes are detected as assets automatically. You can extend the internal list using the assetsInclude option.

Repository with Vite example, with dist folder code vite-test-static

Describe the proposed solution

Is this missing of functionality or feature consciously not added?

If missing of functionality — it would be great to add a feature from Vite that allows working with static resources as in native HTML, without JavaScript.

If feature consciously not added — wonder why, especially considering that Svelte strives to adhere to web standards as much as possible. It would be good to add information to the Svelte documentation about working with static resources and why there is no possibility to work with them as in native HTML.

Alternatives considered

Using JS for add static resources:

<script>
  import svelteLogo from './assets/svelte.svg'
</script>

<img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />

This only way to added hashing in the name and use assetsInlineLimit, static folder not did this.

Importance

would make my life easier

[dominikg]

see enhanced image here https://kit.svelte.dev/docs/images

[alkorlos]

Thank you.

<enhanced:img /> is a non-standard element installed via an additional package, capable of automatically static asset handling and multiply other features. It can be "Alternatives considered".

But the main question was — why Svelte, which strives to adhere to web standards as much as possible, does not support a capability that has been in the web since its inception?

[dominikg]

enhanced:img provides the feature that you are asking for: automatic resolving of asset paths in the src attribute.

There is also https://github.com/bluwy/svelte-preprocess-import-assets if you prefer not to use <enhanced:img> instead of <img> in your svelte component template, but <enhanced:img> compiles to creating regular <img> tags in your application, so this is really just a stylistic preference in your code.

Maybe an argument could be made that vite-plugin-svelte should include this functionality directly, esp. since with vitePreprocess, asset urls in css will be resolved by vite and other frameworks also do it eg https://github.com/vitejs/vite-plugin-vue/blob/main/packages/plugin-vue/README.md#asset-url-handling

But you have 2 existing options to get this feature working today by adding one extra preprocessor or plugin.

[alkorlos]

There are several alternatives for the requested feature, this is not a blocker preventing the use of Svelte. If integrate svelte-preprocess-import-assets, Svelte will work exactly as needed.

Maybe an argument could be made that vite-plugin-svelte should include this functionality directly, esp. since with vitePreprocess, asset urls in css will be resolved by vite and other frameworks also do it eg https://github.com/vitejs/vite-plugin-vue/blob/main/packages/plugin-vue/README.md#asset-url-handling

Yes, this functionality exists in Vite, it's unclear why it's not present in Svelte directly. This is not a critical issue, but such behavior can be confusing. I like Svelte and would prefer that people learning it in the future encounter such issues as little as possible.

If the Svelte team agree that this is a missing feature, then eventually this issue will be resolved. If this feature consciously not added, it would be good to have documentation about static resources in Svelte. The better understand why certain features are present or not in a framework, the more effectively you can use it.

[dominikg]

The best short term option is to document using svelte-preprocess-import-assets or enhanced:img as alternative to the common vite way of manually importing static assets https://vitejs.dev/guide/assets.html#importing-asset-as-url in https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md

[JorensM]

The best short term option is to document using svelte-preprocess-import-assets or enhanced:img as alternative to the common vite way of manually importing static assets https://vitejs.dev/guide/assets.html#importing-asset-as-url in https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md

Hello, I made a PR to update the docs: https://github.com/sveltejs/vite-plugin-svelte/pull/898 , I'm semi-new to contributing so let me know if I did something wrong or if I did everything right, any feedback will be appreciated!