I want to use an image in Astro, using strapi. I inserted the (i guess) the correct link according to the api. This is the code for the image, but it simply won’t display an image, and displays an error that says: Cannot read properties of undefined (reading ‘data’). I can not find where it is going wrong...
this is my astro code:
---
import { Image } from "astro:assets";
const {event} = Astro.props;
---
<div class="wrapper">
<article class={event.attributes.rate > 4.5 && "popular"}>
<Image
src={`${import.meta.env.STRAPI_URL}${event.attributes.image.data.attributes.url}`}
alt="Product image"
width="300"
height="400"
widths={[250, 350, 500, 750]}
sizes="(max-width: 35em) 70vw, (max-width: 50em) 60vw, 30vw"
/>
<h3>{event.attributes.title}</h3>
<p class="description">
{event.attributes.description}
</p>
</article>
</div>
This is the structure of my json (that i got from strapi) the json file, so you can see the structure
- Different other routes to the url of the json, but without any result
Hi the problem there that in your json:
image.data
is arrayso
should work