错误：无法从源解析图像 URL（空）

Question

我正在使用 Sanity 和 React 创建一个博客页面。一切似乎都很好，但是当您单击博客以阅读更多内容时，我收到错误消息“错误：无法从源解析图像 URL (null)”可能是什么问题？下面是我的 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=""
    />
  )}