Is it possible to import images with dynamic path?

[qriosdev]

Objective

I want to create a reusable component to generate optimized images that accepts two props file and alt that would look like this in use:

<Picture file="svelte.png" alt="svelte" />

It would output html picture like this:

<picture>
  <source srcset={img.webp} type="image/webp" />
  <img src={img.src} {alt} />
</picture>

The Issue

Now, I know it's possible to generate webp images using vite-imagetools. But I don't see a way to make a dynamic import with it inside my <Picture /> component using the file prop passed from the parent. So something like this doesn't work:

<script>
  export let file;
  export let alt = '';
  const [name, ext] = file.split('.');
  
  import image from `/images/${name}.${ext}?webp`
</script>

Is it even possible? Or what's the best way to create something like this?

[benmccann]

Rather than passing in the file to your Picture component, pass in the imported image component. I.e. if you have import PictureOfBen from '$img/ben-mccann.jpg?format=avif;webp;jpg&meta'; then pass in PictureOfBen rather than $img/ben-mccann.jpg

You might be the be able to use it with something like https://github.com/bluwy/svelte-preprocess-import-assets to let you use basically just the file path when consuming. I've been wanting to try that in my own project, but haven't had a chance yet

[qriosdev]

It'd work fine for generic use cases where you need to import only a few images. A more specific case I'm looking at is when I have a bunch of markdown files for a blog with metadata like this:

---
title: Article title
description: Article description
image: image.jpg
---

If I want to create a page to list the latest blog posts with images and titles I'll need a way to dynamically get those images, convert them to webp, and add it to the picture tag. And doing so through import isn't possible from what I see.

[benaltair]

@qriousdev This is a side-note, but you could look at the problem from the CMS side of things. Something like Prismic would allow for all the media and content storage for free, but does require additional dev complexity. If you're using any sort of md-based CMS for your content, you could also investigate whether they provide image CDN integrations.

PS: Prismic is releasing a Svelte library soon - if you're interested, you can follow along here: https://github.com/prismicio/prismic-svelte