JonasKruckenberg / imagetools

Load and transform images using a toolbox :toolbox: of custom import directives!

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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:

Screenshot 2023-08-21 at 6 20 13 AM

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