#<Image> component with local images from a .json file

1 messages · Page 1 of 1 (latest)

blissful cape
#

Hi there,

I'm building out a starter theme and I want to list a few cards using json data to loop through them.

So, I'm unable to import the images like "import placeholder from './img/placeholders/placeholder-image.jpg';"

However, the json data is like this

data.json
{
"items": [
{
"src": "./img/placeholders/placeholder-image.jpg",
"alt": "Alt Text goes here",
"width": 280,
"height": 150
},
{
"src": "./img/placeholders/placeholder-image.jpg",
"alt": "Alt Text goes here",
"width": 280,
"height": 150
},
]

Is there anyway to loop through these in an .Astro file and use the Image component to output them?

I'm currently getting this in the console.

title: 'Local images must be imported.',
hint: 'If you want to use an image from your src folder, you need to either import it or if the image is coming from a content collection, use the image() schema helper See https://docs.astro.build/en/guides/images/#src-required for more information on the src property.',

Astro Documentation
Images

Learn how to use images in Astro.

obsidian ice
blissful cape
#

Thanks @obsidian ice - it's adjacent and I'll have a look when I circle back on this 🙂

marble grove
#

Are you already hosting a live page for your site? Personally I'd create a path ie yourdomain.com/API/images.json . Then fetch that path with the domain.