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

【问题标题】：Error: Unable to resolve image URL from source (null)错误：无法从源解析图像 URL（空）
【发布时间】：2021-11-01 00:16:58
【问题描述】：

我正在使用 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=""
   />

【问题讨论】：

标签： reactjs blogs sanity

【解决方案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=""
    />
  )}

【讨论】：