React对接Sanity后端图片加载报错：ImageUrlBuilder类型不兼容

问题场景 #

React前端对接Sanity后端，文本内容可正常获取，但图片加载时出现类型不兼容警告：

Warning: The provided `src` attribute is an unsupported type ImageUrlBuilder. This value must be coerced to a string before before using it here.
    at img
    ...

错误原因 #

你的urlFor函数返回的是Sanity的ImageUrlBuilder实例对象，而<img>标签的src属性要求传入字符串类型的URL，两者类型不匹配导致警告。

解决步骤 #

需要调用ImageUrlBuilder实例的.url()方法，将其转换为可直接使用的URL字符串。有两种实现方式：

方式1：修改client.js中的urlFor函数 #

直接在函数内部返回字符串形式的URL：

import { createClient } from "@sanity/client";
import imageUrlBuilder from "@sanity/image-url";

export const client = createClient({
    projectId: process.env.REACT_APP_SANITY_PROJECT_ID,
    dataset: "production",
    apiVersion: "2023-04-24",
    useCdn: true,
    token: process.env.REACT_APP_SANITY_TOKEN,
});

const builder = imageUrlBuilder(client);

// 修改此处，调用.url()返回字符串
export const urlFor = (source) => builder.image(source).url();

方式2：在组件使用时添加.url() #

保持client.js不变，在组件中使用urlFor时手动调用.url()，还可链式添加图片参数配置：

// 组件示例
function About() {
  // 假设从Sanity获取到的数据包含image字段
  const { image } = sanityData;
  
  return (
    <div>
      {/* 调用.url()转换为字符串，可额外添加尺寸、质量等配置 */}
      <img src={urlFor(image).width(400).quality(85).url()} alt="示例图片" />
    </div>
  );
}

说明 #

Sanity官方示例中的urlFor仅创建了ImageUrlBuilder实例，目的是支持链式调用调整图片参数（比如尺寸、质量），最终必须通过.url()生成实际的URL字符串才能用于img的src属性。

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