Astro框架中Strapi图片无法渲染问题求助

我在Astro框架里尝试使用Strapi提供的图片，已经按照API返回的结构拼接了图片链接，但图片无法显示，还抛出错误：Cannot read properties of undefined (reading ‘data’)，找不到问题根源。

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

从Strapi获取的JSON数据结构中，event.attributes.image是媒体字段，但当前代码访问image.data时出现未定义的情况。我已经试过调整JSON路径，但都没有效果。

问题排查与解决方案 #

1. 空值安全处理
   报错核心原因是event.attributes.image可能为null或undefined，直接访问image.data会触发错误。先添加空值判断，避免崩溃：

   ---
   import { Image } from "astro:assets";
   const {event} = Astro.props;
   // 安全获取图片URL，为空时使用默认图
   const imageUrl = event.attributes.image?.data?.attributes?.url 
     ? `${import.meta.env.STRAPI_URL}${event.attributes.image.data.attributes.url}`
     : '/images/default-event.jpg'; // 替换为你的默认图片路径
   ---
   

2. 检查Strapi API请求参数
   Strapi默认不会关联返回媒体字段数据，需要在请求事件数据时添加populate参数，确保图片数据被返回：

   • 单图字段：请求URL需包含 ?populate=image
   • 多图字段：需用 ?populate=image.data（根据实际字段结构调整）

3. 验证环境变量与URL拼接
   确认import.meta.env.STRAPI_URL配置正确，比如是否遗漏协议（http/https）或末尾斜杠。示例：

   • 正确配置：STRAPI_URL=http://localhost:1337
   • 拼接后有效URL：http://localhost:1337/uploads/xxx.jpg

4. 检查Strapi媒体权限
   确保Strapi媒体库允许外部访问：在后台「设置→角色与权限→公共权限」中，开启「上传」的查找权限。

修改后的完整代码示例：

---
import { Image } from "astro:assets";
const {event} = Astro.props;
const imageUrl = event.attributes.image?.data?.attributes?.url 
  ? `${import.meta.env.STRAPI_URL}${event.attributes.image.data.attributes.url}`
  : '/images/default-event.jpg';
---
<div class="wrapper">
    <article class={event.attributes.rate > 4.5 && "popular"}>
      <Image
        src={imageUrl}
        alt={event.attributes.title || "活动图片"}
        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>

内容的提问来源于stack exchange，提问作者Bas Bulckaen