Error: Unable to resolve image URL from source (null)

Question

我正在使用 Sanity 和 React 创建博客页面。一切似乎都很好，但是当您单击博客阅读更多内容时，我收到错误消息“错误：无法从源解析图像 URL（空）”可能是什么问题？下面是我的 OnePage.js 页面的一部分，其中控制台显示有错误

  </h2>
  <div className="flex justify-center text-gray-800">
   <img
    src={urlFor(postData.authorImage).url()}
     className="w-10 h-10 rounded-full"
      alt=""
   />

Answer 1

看起来 authorImage 在这种情况下是 null，这意味着作者没有图像。为了防止这种情况发生，您可以在渲染图像标签之前检查作者是否有图像。换句话说，像这样：

  </h2>
  <div className="flex justify-center text-gray-800">
  {postData.authorImage && (
    <img
      src={urlFor(postData.authorImage).url()}
      className="w-10 h-10 rounded-full"
      alt=""
    />
  )}