as=source and as=srcset both outputting srcset with all the same width params
Lastofthefirst opened this issue · comments
I am trying to create multiple images and formats, but i keep getting the same issue with the sourceset width:
See how they are all looking for 896w?
Heres my code (I did the samething with as=srcset):
import avif from "../images/grief.jpg?width=378;480;960&format=avif&as=source";
import webp from "../images/grief.jpg?width=378;480;960&format=webp&as=source";
import fallback from "../images/grief.jpg?width=378;480;960&format=fallback&as=source";
...
<picture>
<source
class="object-cover absolute inset-0 z-0 w-full h-full rounded-3xl"
srcset={avif.map(({src, w}) => `${src} ${w}w`).join(',')}
type="image/avif"
/>
<source
class="object-cover absolute inset-0 z-0 w-full h-full rounded-3xl"
srcset={webp.map(({src, w}) => `${src} ${w}w`).join(',')}
type="image/webp"
/>
<img
class="object-cover absolute inset-0 z-0 w-full h-full rounded-3xl"
srcset={fallback.map(({src, w}) => `${src} ${w}w`).join(',')}
/>
</picture>
Also heres my vite.config:
import { imagetools } from "vite-imagetools";
plugins:[
imagetools(),
/*
Uncomment the following line to enable solid-devtools.
For more info see https://github.com/thetarnav/solid-devtools/tree/main/packages/extension#readme
*/
// devtools(),
solidPlugin(),
],
Whats going on here?
It's hard for me to tell what's happening here without a way to reproduce it. Could you provide a project that reproduces this?
@benmccann it seems doesn't works with as=picture
also. And it's very easy to reproduce: I've installed the latest vite-imagetools
(v.6.0.0) and added this import:
import img from './img.png?w=448;896;1200&format=avif;webp;png&as=picture';
and I've wrote console.log
to print img
and it returns this:
{
sources: {
avif: '/@imagetools/8f70b828b349820bf3ee30ed851281dc3827a3de 448w',
webp: '/@imagetools/24dc32040340a59216e878829e987940c1c3edfd 448w'
},
img: {
src: '/@imagetools/85ed5dcd1cc4fb9bfac349464e7350123fe52268',
w: 448,
h: 640
}
}
As I noticed it returns string with only one size instead of array like it is described in docs.
@Lastofthefirst I just noticed that you specified width
instead of w
@w7it my projects are working fine. Please provide a project that reproduces your error