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

Question

I am using Sanity and React to create a blog page. Everything seems to be okay but when you click on a blog to read more I get the error message "Error: Unable to resolve image URL from source (null)" What could be the issue? Below is part of my OnePage.js page where console shows there's an error

  </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

It looks like authorImage in this case is null, meaning the author doesn't have an image. To prevent this from happening, you can check whether or not the author has an image before rendering the image tag. In other words, something like this:

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