#Process an array containing images into a new array.

4 messages · Page 1 of 1 (latest)

radiant dune
#

This array contains some images, and I want to pass the optimized image url in the array to the svelte component.
For example:

---
import { getImage } from 'astro:assets'
import Tabs from './Tabs.svelte'
const tabsData = [
    {
      title: 'tab1',
      img: '~/assets/images/tabs-1.jpg',
    },
    {
      title: 'tab2',
      img: '~/assets/images/tabs-2.jpg',
    },
  ]

const optimizedData = ...
---
<Tabs tabsData="tabsData" />

Now I want create an new array from "tabsData", just change img value to optimized value by getImage, then pass it as prop to "Tabs.svelte".
How should this new array be generated?

lapis flameBOT
#
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.

median mulch
#

just do const optimizedData = await Promise.all(tabsData.map(async(item)=>({title: item.title, img: await getImage(),})); and you have an array with optimized images

#

and just pass this optimizedData to the props