Strapi访问图片URL报错Cannot read properties of undefined求助

问题根因 #

• 字段名不匹配：你代码中访问的是data.image，但接口返回的图片字段为大写的Photo，data.image本身为undefined，访问其下的formats属性自然会触发报错。
• 字段大小写不对应：接口返回的标题字段为Title（首字母大写），你代码中解构的小写title也无法正常拿到对应值。
• 多余序列化操作：你代码中对url属性套了JSON.stringify()，该操作会给字符串额外包裹双引号，拼接后会导致图片路径错误。

最简修改方案 #

直接修改generateHTMLtemplate函数即可，同时增加可选链做兜底，避免部分内容未上传图片时页面报错：

// constants
const strapi = 'http://localhost:1337/posts?populate=*' // 加populate参数确保返回关联的图片字段，Strapi v4必须加
const rootNode = document.getElementById('root');
const api_url = "http://localhost:1337"

function generateHTMLtemplate(data) {
  // 字段名完全和接口返回对齐
  const { Title, description, Photo } = data
  // 拼接完整图片路径，无图片时可替换为你自己的占位图地址
  const imgFullUrl = Photo?.formats?.small?.url ? `${api_url}${Photo.formats.small.url}` : ''
  return `
    <div class="time-card-header">
    <header class="time-card-header">
    <div class="header-content">
    <h4 class="timeline-title"><span class="badge">${Title}</span></h4>
    <p>${description}</p>
    <div class="circle">
    <img src="${imgFullUrl}" alt="${Title}">
    </div>
    </div>
    </header>
     <div class="line"></div>
   </div>
`
}

// 后续其他代码无需改动

额外说明 #

如果你的Strapi版本为v4，必须在请求路径后加?populate=*参数，否则接口默认不会返回关联的媒体字段，也会出现相同的undefined报错。

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