How do images work in Astro 3.x?

[candid epoch]

Sorry for the dumb question, but something seems really unintuitive in how images work in Astro 3. I'm a seasoned web dev and I can't figure it out. 🤷‍♂️

this was my code in Astro 2:

    <Picture
      class="img"
      src={`/images/posters/${slug}.jpg`}
      widths={[400, 800, 1200, 1800]}
      sizes="(max-width: 1800px) 100vw, 1800px"
      formats={['webp', 'jpeg']}
      alt={name}
    />

I strip away everything except src/formats/alt, just to keep it minimal, and it doesn't work. apparently you can no longer pass URLs to src? but I can't import that image because it's dynamic. I tried using getImage() which is what Kapai suggested, but I can't take that result and pass it to Picture

any help would be super appreciated!

[tender patio]

No-one around right now?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

[severe stream]

I believe you still need to have a src/assets folder.. ? Also, play around with your path. ( Ie. ./assets/image or /assets/image/, etc)

[candid epoch]

the images are in public/images/posters/...

but.. the docs do say src is better, otherwise it won't process them. which is what @astrojs/image was doing. but now that's deprecated

so.. fair point 😄 I'll try moving them and see

I still don't know how to dynamically import the image.

I'll try using import()

oof

UnsupportedImageFormat: Received unsupported format `undefined` from `undefined`. Currently only jpeg, jpg, png, tiff, webp, gif, svg, avif are supported by our image services.
    at Object.validateOptions (/Volumes/SuperData/Sites/samhulick-4/node_modules/.pnpm/astro@3.4.0_sass@1.69.5/node_modules/astro/dist/assets/services/service.js:59:15)
    at Module.getImage (/Volumes/SuperData/Sites/samhulick-4/node_modules/.pnpm/astro@3.4.0_sass@1.69.5/node_modules/astro/dist/assets/internal.js:64:68)

I dunno if this is the right way or not.. also, type info is lost, so it thinks posterImg is of type any.

const posterImg = await import(`../assets/images/posters/${project.slug}.jpg`);

<Picture
  class="img"
  src={posterImg}
  formats={['webp', 'jpeg']}
  alt={project.name}
/>

[candid epoch]

maybe there's a better way now to go about this. I just have pages in Markdown format with custom fields:

slug: project-1
name: Some Project
year: 2012

[candid epoch]

I think I need to go back to the basics and study up. https://docs.astro.build/en/guides/content-collections/

my website is just a collection of projects i've worked on, and each project can be clicked into for more details (text, image, a URL for an iframe to embed a player, etc)

[signal iron]

You can do something like

<Image src={import(`../assets/${slug}.png`)} ... />

Also if the slug you want isn't different from the filename you can get the slug directly from the collection or entry when you query it instead of defining it separately

[candid epoch]

I tried that, and it locked up while loading. I'll have to set aside some time to start from scratch like I'm brand new to Astro. This is a personal side project so it's nothing critical at the moment

(I'm using Picture BTW)