如何通过GraphQL从Prismic获取与上传画质一致的图片

问题根源 #

Prismic默认通过GraphQL返回的图片字段，是经过平台自带的Imgix服务自动压缩、尺寸裁剪后的衍生版本；localFile字段返回null，通常是使用Gatsby源插件时未开启本地文件下载配置导致的。

解决方法 #

方法1：通过localFile读取本地缓存原图（仅适用于使用gatsby-source-prismic的场景） #

• 打开项目根目录的gatsby-config.js，找到gatsby-source-prismic的配置项，添加shouldDownloadFiles规则开启图片自动下载：

{
  resolve: 'gatsby-source-prismic',
  options: {
    // 你之前的仓库名、schema配置等保持不变
    shouldDownloadFiles: {
      'PrismicImageField.url': true
    }
  }
}

• 保存配置后执行gatsby clean清除本地缓存，重启开发服务，此时localFile字段将正常返回数据，直接读取localFile.publicURL即可拿到和上传版本完全一致的原画质图片。

方法2：直接通过查询参数获取原图（无框架限制，通用方案） #

Prismic返回的图片地址默认带Imgix压缩参数，不需要下载本地文件的话，可以直接在查询时自定义参数获取原图：

• 查询图片url字段时传入imgixParams，关闭压缩、取消尺寸限制：

query GetOriginalImage {
  # 替换成你实际的文档查询字段
  prismicYourDocType {
    data {
      your_image_field {
        url(
          imgixParams: {
            q: 100 # 压缩质量拉满
            auto: "format" # 仅自动适配格式，不做压缩
            w: 8192 # 取Imgix支持的最大宽度阈值，不会缩放小于该宽度的原图
            fit: "max" # 禁止强行放大图片
          }
        )
      }
    }
  }
}

• 不要使用查询中自带的fixed、fluid、各类预设缩略图字段，这些字段都是平台自动生成的多尺寸压缩版本，画质低于原图。

前置检查项 #

• 先登录Prismic仓库后台，进入「设置 - 媒体库」页面，确认全局自动压缩开关为关闭状态，否则接口无法返回未压缩的原图。
• 如果查询时自定义了图片裁剪参数，要删除所有和尺寸、质量相关的裁剪规则。

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