kit icon indicating copy to clipboard operation
kit copied to clipboard

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

Open Extarys opened this issue 1 year ago • 0 comments

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.

Extarys avatar Aug 25 '24 00:08 Extarys