Gatsby对接Heroku部署的Strapi API无法正确渲染图片问题求助

解决方案 #

你遇到的核心问题是Strapi返回的图片路径是相对路径，没有带上Strapi服务的域名，直接使用会默认请求你Gatsby站点的域名下的资源，自然无法找到。按照以下步骤操作即可修复：

1. 配置Gatsby环境变量
   Gatsby中只有前缀为GATSBY_的环境变量才能在客户端组件中访问，在你Gatsby项目的.env和.env.production文件中新增如下配置：

# 本地开发如果使用本地Strapi可替换为你的本地Strapi服务地址
GATSBY_STRAPI_API_URL=https://john-strapi.herokuapp.com

2. 修改图片渲染代码
   把Strapi的服务域名和返回的图片相对路径拼接后作为img的src属性，修改后的代码如下：

.map(band => (
      <article className="bands" key={band.id}>
        <h2>{band.band_name}</h2>
        <img
          src={`${process.env.GATSBY_STRAPI_API_URL}${band.band_img.url}`}
          alt={band.band_name}
        />
        <p>{band.band_desc}</p>

如果你需要使用缩略图，把band.band_img.url替换为band.band_img.formats.thumbnail.url即可。
3. 可选优化
如果你后续改用gatsby-source-strapi插件拉取Strapi数据，可以在插件配置项中添加baseURL参数，插件会自动处理图片路径拼接，不需要手动操作。

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