Dynamic import

Will it be possible in the v3 to use import("./image.jpg?width=100")?

Why would this be useful? Let’s say I create imageLoader function like this:

const imageLoader = (sizes: number[]) => {
    return (src: string) => {
        const res = {};
    
        sizes.forEach((size: number) => 
            res[size] = import(`${src}?width=${size}`)
        );

        return res;
    };
};

I then use it to create image loader with predefined widths like this:

const img = imageLoader([100, 200, 300]);

Then when I need to import images anywhere in my app I do it like this:

{
    main: img("./main.jpg"),
    other: [
        img("./01.jpg"),
        img("./02.jpg"),
        img("./03.jpg")
    ]
}

The value of the main prop would be something along the lines of this:

{
    aspectRatio: 0.6,
    original: "./main.jpg",
    variants: {
        jpg: {
            100: "cache/main.jpg?width=100",
            200: "cache/main.jpg?width=200",
            300: "cache/main.jpg?width=300"
        }
    }
}

I could then use it in JSX like this:

return (
    <div>
        <div style={`height:0;padding-bottom:${image.main.aspectRatio*100}%;`} />
        <img src={image.main.variants.jpg[parentWidth]} />
    </div>
);

Thanks to tree-shaking the resulting code would be minimal.

All of this is not possible using normal imports like:

import main from "/image.jpg?width=100";

[urbantrout]

I am using this plugin and it works fine in development mode. But whenever I try to build via adapter-static the dynamic import fails. I think it has something to do with this limitation:

https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#imports-must-end-with-a-file-extension

As soon as I remove the query string from the dynamic import, the build succeeds. But without any transformations obviously…

[JonasKruckenberg]

The next branch is now publishing on npm under the tag ‘next’. You can check it out by running npm install --save-dev vite-imagetools@next

This issue is addressed in that release.