Gridsome中v-for渲染Strapi/S3图片不显示问题求助

1. 优先用原生<img>替代Gridsome的g-image #

g-image默认仅支持本地静态资源，直接改用原生<img>标签大概率能解决问题。如果必须用g-image做图片优化，需要安装@gridsome/plugin-image-optimizer并配置允许远程域名：

module.exports = {
  plugins: [
    {
      use: '@gridsome/plugin-image-optimizer',
      options: {
        allowRemote: true,
        remoteDomains: ['你的S3存储桶域名'] // 例如 s3.eu-west-1.amazonaws.com
      }
    }
  ]
}

2. 确认数据绑定层级正确 #

检查v-for中的图片路径，API返回的图片URL结构为data[].attributes.image.data.attributes.url，绑定时别写错层级：

<template>
  <div v-for="item in portfolioItems" :key="item.id">
    <img :src="item.attributes.image.data.attributes.url" alt="Portrait">
  </div>
</template>

<script>
export default {
  data() {
    return { portfolioItems: [] }
  },
  async mounted() {
    const res = await fetch('https://g1c0r7af15.execute-api.eu-west-1.amazonaws.com/dev/api/portfolio-items?filters[category][$eq]=Portraits&populate=image')
    const { data } = await res.json()
    this.portfolioItems = data
  }
}
</script>

可以在控制台打印this.portfolioItems，确认每个条目里的图片URL是完整的S3绝对地址，而非相对路径。

3. 排查Vue响应式数据更新问题 #

如果用Gridsome的asyncData做服务端渲染数据获取，确保返回的对象正确：

export default {
  async asyncData() {
    const res = await fetch('https://g1c0r7af15.execute-api.eu-west-1.amazonaws.com/dev/api/portfolio-items?filters[category][$eq]=Portraits&populate=image')
    const { data } = await res.json()
    return { portfolioItems: data }
  }
}

直接替换整个数组而非用push添加元素，Vue才能正确检测到数据变化。

4. 再次确认S3的CORS配置 #

即使存储桶设为公开，本地开发时仍可能存在CORS限制。前往S3控制台将CORS规则修改为：

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin> <!-- 本地开发用*，上线后替换为你的站点域名 -->
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

5. 检查URL是否被转义 #

在浏览器控制台打印图片的src属性，若发现&被转义为&等字符，用decodeURIComponent解码：

<img :src="decodeURIComponent(item.attributes.image.data.attributes.url)" alt="Portrait">

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