Would it be possible to use this with images in the /static/ folder?

AutomateAaron commented 1 year ago

Perhaps a dumb question, but would it be possible to progressively load images in the static folder?

For context, I'm making an image section of my site, I'm putting the images in static so that I can get permalinks to the images. Then using something like this to list those files for an index page.

Thanks in advance!

zerodevx commented 1 year ago

That's a good question. If I'm understanding your issue correctly, you're really asking about dynamic imports.

The thing is vite-imagetools is not really handling dynamic imports very well - and active development seemed to have stalled unfortunately. I think there's more "vite-ey" ways to solve this, but I'll have to really look into it once I get a moment - I might wanna handle the transformations myself in a future release.

A good start may look like this, but I'm not 100% sure it'll work so YMMV:

<script>
import Img from '@zerodevx/svelte-img'

const list = ... // load a list of img paths from your load function or something
const imgs = import.meta.glob('./static/*.jpg?run', { eager: true })
</script>

<Img src={imgs[list[0]} />

AutomateAaron commented 1 year ago

As far as I can tell, this does not work since one cannot import images outside of the src directory, I'm closing the issue for now as I expect there's nothing that can be done from the svelte-img side of things to allow for this:

Assets in public cannot be imported from JavaScript.
Instead of /static/images/about-new.jpg?run, put the file in the src directory, and use /src/images/about-new.jpg?run instead.

leoj3n commented 7 months ago

@AaronNBrock This seems to work fine in +page.server.svelte and +layout.server.js in a SvelteKit project:

const globbedPhotos = Object.keys(import.meta.glob('$static/images/photos/*.{jpg,png}')).map(
    (key) => key.replace('/static', '')
);

This seems to work in +page.svelte just fine as well; I built and previewed and see this logged in the devtools console:

[
    "/images/photos/1.jpg",
    "/images/photos/10.jpg",
    "/images/photos/11.jpg",
    "/images/photos/12.jpg",
    "/images/photos/13.jpg",
    "/images/photos/14.jpg",
    "/images/photos/15.jpg",
    "/images/photos/16.jpg",
    "/images/photos/17.jpg",
    "/images/photos/18.jpg",
    "/images/photos/19.jpg",
    "/images/photos/2.jpg",
    "/images/photos/20.jpg",
    "/images/photos/21.jpg",
    "/images/photos/22.jpg",
    "/images/photos/23.jpg",
    "/images/photos/24.jpg",
    "/images/photos/25.jpg",
    "/images/photos/26.jpg",
    "/images/photos/27.jpg",
    "/images/photos/28.jpg",
    "/images/photos/29.jpg",
    "/images/photos/3.jpg",
    "/images/photos/30.jpg",
    "/images/photos/31.jpg",
    "/images/photos/32.jpg",
    "/images/photos/33.jpg",
    "/images/photos/34.jpg",
    "/images/photos/35.jpg",
    "/images/photos/4.jpg",
    "/images/photos/5.jpg",
    "/images/photos/6.jpg",
    "/images/photos/7.jpg",
    "/images/photos/8.jpg",
    "/images/photos/9.jpg"
]

Note svelte.config.js is like that for $static alias:

const config = {
    kit: {
        alias: {
            $static: './static',
        }
    }
};

leoj3n commented 7 months ago

Ah, never mind, I see now the error @AaronNBrock is talking about still comes from vite if using query and ./static:

    const modules = import.meta.glob('$static/images/photos/*.jpg', {
        import: 'default',
        eager: true,
        query: { w: 640, h: 640, fit: 'cover', as: 'run' }
    });

Same without glob:

import src from '$static/images/photos/1.jpg?w=480;800as=run';

Assets in public directory cannot be imported from JavaScript.
If you intend to import that asset, put the file in the src directory

zerodevx / svelte-img

Would it be possible to use this with images in the /static/ folder? #9