Strapi 图像未在 Astro 框架中渲染

Question

我想在Astro 中使用strapi 中的图像。我根据 api 插入了（我猜）正确的链接。这是图像的代码，但它根本不会显示图像，并显示错误：无法读取未定义的属性（读取“数据”）。我找不到哪里出了问题...

这是我的 astro 代码：

---
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>

这是我的json的结构（我从strapi获得）

• 不同的其他路由到json的url，但没有任何结果

Answer 1

您好，您的 json 中存在问题：

image.data

是数组

所以

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

应该可以工作