React项目中Sanity的urlFor函数无法正常使用求助

问题核心 #

你遇到的页面空白，根源是**urlFor函数返回的不是直接可用的URL字符串**，而是Sanity的ImageUrlBuilder实例。<img>标签的src属性需要字符串格式的URL，直接传入Builder对象会导致渲染失败，进而引发页面空白。

修复步骤 #

1. 修正urlFor的调用方式

在About组件的img标签中，给urlFor(about.imgUrl)加上.url()方法，生成实际的URL字符串：

// 原错误代码
<img src={urlFor(about.imgUrl)} alt={about.title} />

// 修改后代码
<img src={urlFor(about.imgUrl).url()} alt={about.title} />

2. 增加边界判断（可选但推荐）

为了避免about.imgUrl为空或不存在时出现报错，可以添加条件判断做容错处理：

<img 
  src={about.imgUrl ? urlFor(about.imgUrl).url() : '你的默认图片地址'} 
  alt={about.title} 
/>

3. 验证Sanity数据结构

确认Sanity后台中abouts类型的文档里，imgUrl字段是Image类型，而非字符串或其他类型。如果字段类型不匹配，urlFor无法正确解析，也会导致问题。

额外检查点 #

• 打印process.env.REACT_APP_SANITY_PROJECT_ID等环境变量，确认Sanity客户端配置的参数已正确加载。
• 查看浏览器控制台，若存在CORS相关报错，需在Sanity后台将你的前端域名添加到CORS白名单。

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