Strapi image not rendering in Astro framework

Question

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

Answer 1

Hi the problem there that in your json:

image.data is array

so

src={`${import.meta.env.STRAPI_URL}${event.attributes.image.data[0].attributes.url}`}

should work