Strapi与Nuxt项目中获取事件图片URL返回undefined的问题

• Strapi接口返回的事件结构中，image字段是数组类型，不是普通对象：你当前代码写的this.events[0].image.url，是直接对数组对象取url属性，数组本身没有这个属性，所以会返回undefined。
• 接口返回的url字段是不带域名的相对路径，就算取到值，直接使用也会出现图片加载失败的问题。

1. 调整取值逻辑 #

数组的第一个元素才是实际的图片信息对象，需要先索引取到数组内的图片元素，再读取url属性，同时增加空值兜底，避免事件未上传图片时代码报错：

// 错误写法（无法取值）
this.events[0].image.url

// 正确写法（带空值兜底）
this.events[0].image?.[0]?.url

2. 拼接完整图片地址 #

Strapi本地存储返回的图片路径是相对路径（比如/uploads/xxx.jpeg），需要拼接上本地Strapi服务的地址前缀，才能正常加载图片：

// 拼接后的可正常访问的完整图片地址
const fullImageUrl = `http://localhost:1338${this.events[0].image?.[0]?.url}`

3. 可选优化：调整字段关联模式 #

你现在的image字段返回数组，是因为在Strapi的内容类型配置里，选的是Multiple Media（多图关联）模式。如果业务场景只需要单张活动封面，可以在Strapi后台把这个字段改成Single Media（单图关联），调整后接口会直接返回图片对象，不需要从数组里取值，直接this.events[0].image.url就能拿到对应值。

created() {
axios.get('http://localhost:1338/events').then(res => {
this.events = res.data.sort((a, b) => b.date < a.date ? 1: -1);
const firstEvent = this.events[0]
// 校验数组存在且有内容再取值
if (firstEvent.image?.length) {
  const imageUrl = `http://localhost:1338${firstEvent.image[0].url}`
  console.log('正常获取的图片URL：', imageUrl)
}
})
.catch(err => console.log(err))
}

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