Best way to filter empty image fields?

[michael-odonovan]

Hi, Previously I have been using the Sanity UrlBuilder and filtering empty fields from there:

import imageUrlBuilder from '@sanity/image-url'
import sanityClient from '../client'
import BlockContent from '@sanity/block-content-to-react'

export default function Blurb({ blurb }) {
  const builder = imageUrlBuilder(sanityClient)

  function urlFor(source) {
    if (!source) {
      return
    } else {
      return builder.image(source)
    }
  }

  return (
    <>
      <img src={urlFor(blurb.mainImage)} />
      <h1>{blurb.heading}</h1>
      <div><BlockContent blocks={blurb.body} /></div>
    </>
  )
}

However I'm having a lot of trouble working out how to do this using the next-sanity plugin. Sorry for this, I am quite new.

[michael-odonovan]

Sorry I am being really dumb today. Simple solution:

return (
      { (blurb.mainImage) && <Image {...imageProps} /> }
}

of course feel free to delete as this is just my inexperience. regards