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

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=""
    />
  )}

Answer 2

您可以在 src 内部传递运算符，而不是在图像元素之前传递它`

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

`

Answer 3

我遇到了错误，但就我而言，它是（未定义） 我发表了一篇没有图像的 sanity 博客文章，因此在 sanity 中找不到图像 url。也许您可以在图像丢失的情况下给它一个后备。

src={postData.authorImage ? urlFor(postData.authorImage).url() : "fallback-image-url" }

如果您使用next.js并且使用url，请记住在next.config.js中添加cdn