Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enhanced:img doesn't generate multiple sizes when using dynamically imported image #12609

Open
Extarys opened this issue Aug 25, 2024 · 0 comments

Comments

@Extarys
Copy link

Extarys commented Aug 25, 2024

Describe the bug

According to the documentation:

If you have a large image, such as a hero image taking the width of the design, you should specify sizes so that smaller versions are requested on smaller devices. E.g. if you have a 1280px image you may want to specify something like:

<enhanced:img src="./image.png" sizes="min(1280px, 100vw)"/>

If sizes is specified, <enhanced:img> will generate small images for smaller devices and populate the srcset attribute.


This doesn't appear to work when the image is loaded dynamically:

Reproduction

Create a component (trimmed):

<script>
let { bgSrc } = $props()
</script>
<enhanced:img src={bgSrc}
   sizes="min(800px, 1900px)" />

From a page:

	import heroBgSrc from "$static/stock/bg.jpg?enhanced"
...
	<Hero bgSrc={heroBgSrc} />

Result:

<picture>
<source srcset="/@imagetools/f4bde5cce2511ff9615b0db6e65acb41672eed99 4142w, /@imagetools/6edc3aef7c7ad5b939438aade22388525cd27d51 8284w" sizes="min(800px, 1900px)" type="image/avif">
<source srcset="/@imagetools/9b20960ece0d072aff909ed0412b8c27d4ffbf28 4142w, /@imagetools/32e33bfd0bb5ffb8887de23921ee4bf760582417 8284w" sizes="min(800px, 1900px)" type="image/webp">
<source srcset="/@imagetools/07b72a21665d5252b5c52ebbfcb19943d299f76d 4142w, /@imagetools/e82c9351d6bba21db8d71d462b3359bb5d447320 8284w" sizes="min(800px, 1900px)" type="image/jpeg">
<img src="/@imagetools/e82c9351d6bba21db8d71d462b3359bb5d447320" svelte-vleyz1" width="8284" height="4955">
</picture>

Logs

None

System Info

System:
    OS: Linux 6.10 Fedora Linux 40 (KDE Plasma)
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 42.03 GB / 62.68 GB
    Container: Yes
    Shell: 5.2.26 - /bin/bash
  Binaries:
    Node: 20.12.2 - /usr/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.5.0 - /usr/bin/npm
    bun: 1.1.20 - ~/.bun/bin/bun
  npmPackages:
    svelte: ^5.0.0-next.1 => 5.0.0-next.192

Severity

annoyance

Additional Information

I hope this is how it is intended to be used, the docs seem to say so, but I'm quite a beginner at this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants