如何使用ReactJS和Sanity BlockContent实现响应式图片适配

实现响应式图片适配的方案 #

• 调整BlockContent的imageOptions参数，仅用来控制输出的图片资源分辨率，避免裁剪：
  由于imageOptions仅支持像素单位，只需传入足够覆盖你站点最大展示宽度的像素值即可，不需要和实际容器尺寸匹配，示例配置如下：

  <BlockContent
    blocks={post.body}
    imageOptions={{ 
      width: 2000, // 取值可设为你站点适配的最大屏幕宽度像素，保证原图清晰度
      maxWidth: 2000
      // 不设置固定height，避免强制裁剪图片
    }}
    serializers={serializers}
  />
  

• 通过自定义serializers图片序列化器，控制渲染样式实现全宽适配：
  imageOptions仅控制生成的图片资源本身的尺寸，你可以重写图片渲染逻辑，完全自定义图片和外层容器的样式，不受imageOptions的参数限制，示例配置如下：

  const serializers = {
    types: {
      image: ({ node }) => {
        return (
          // 外层容器占满全宽
          <div style={{ width: '100%', margin: '1rem 0' }}>
            <img
              src={node.asset.url}
              alt={node.alt || ''}
              style={{
                width: '100%',
                height: 'auto',
                display: 'block',
                objectFit: 'contain' // 可根据需求改为cover保证充满容器但不拉伸
              }}
            />
          </div>
        )
      }
    }
  }
  

如果需要保留Sanity原生的图片格式优化、自动裁剪能力，可在自定义序列化器中引入@sanity/image-url工具生成对应规格的图片链接，无需依赖imageOptions的内置参数。

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