Netlify构建报错:Contentful图片路径被额外追加.jpg后缀
Gatsby+Netlify部署Contentful图片后缀报错解决思路
- 该报错根因为
gatsby-source-contentful@6.x与Gatsby 4.2.0存在资源路径拼接兼容bug:Contentful返回带.jpeg/.png后缀的资源时,插件会额外追加一次.jpg后缀,本地环境因缓存资源刚好匹配未触发,Netlify干净构建环境就会出现文件找不到的问题。 - 可行修复方案按优先级排序:
- 降级
gatsby-source-contentful到匹配Gatsby 4.2.x的稳定兼容版本v5.14.0,执行命令npm install gatsby-source-contentful@5.14.0即可,该版本不存在后缀重复拼接问题 - 在gatsby-config.js的gatsby-source-contentful配置项中新增
downloadLocal: false参数,关闭插件本地图片下载缓存逻辑,直接调用Contentful CDN资源链接,绕开本地路径生成bug - 在Netlify后台的环境变量配置页添加
GATSBY_CLEAN_CACHE=true,强制每次构建前自动清理全局缓存,避免旧缓存残留影响 - 若不想调整插件版本,可在代码中获取图片路径时增加正则处理,手动将
.*\.(jpeg|png)\.jpg格式的错误路径替换为正确后缀的路径
- 降级
- 额外兼容优化:可将
gatsby-plugin-netlify升级到v4.1.0版本,适配Gatsby 4.x的构建逻辑,避免部署插件出现其他兼容问题 - 修复验证:调整完成后先在本地执行
gatsby clean && gatsby build确认无报错,再推送代码触发Netlify构建即可
内容的提问来源于stack exchange,提问作者AskQuestion
相关产品推荐
相关产品推荐

