Sanity+Next.js开发应用时图片src属性类型错误求助

这个警告的核心原因是你直接把Sanity的ImageUrlBuilder对象传给了img标签的src属性，而src只接受字符串类型的URL。以下是具体修复步骤：

• 定位HeroBanner.jsx第16行的图片代码，找到你构建图片URL的部分。比如你可能写了类似这样的代码：

  <img src={urlFor(bannerImage)} alt="Hero banner" />
  

  这里的urlFor(bannerImage)返回的是ImageUrlBuilder对象，不是字符串，所以会触发警告。

• 给ImageUrlBuilder对象调用.url()方法，把它转换成字符串URL：

  <img src={urlFor(bannerImage).url()} alt="Hero banner" />
  

  如果需要添加尺寸、裁剪等参数，也可以在调用.url()之前链式调用，比如：

  <img src={urlFor(bannerImage).width(1200).height(600).url()} alt="Hero banner" />
  

• 如果你用的是Next.js的官方<Image>组件，除了转成字符串URL，还要确保在next.config.js里配置了Sanity图片的域名：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    images: {
      domains: ['cdn.sanity.io'],
    },
  }
  
  module.exports = nextConfig
  

• 最后确认Sanity数据查询是否正确，确保图片字段包含了asset相关的元数据，比如你的GROQ查询应该包含：

  *[_type == "heroBanner"][0] {
    image {
      asset -> {
        url
      }
    }
  }
  

  或者如果你用@sanity/image-url库，确保查询返回的图片对象包含足够的信息让urlFor能正确构建URL。

修复后重新运行npm run dev，警告应该会消失，图片也能正常显示。

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