Next.js Discord

Discord Forum

Images not rendering in prodcution

Unanswered
Giant panda posted this in #help-forum
Open in Discord
Giant pandaOP
Hi, I've recently converted my website to use SSG with ISR: https://www.highpointroofing.work/

in production, some of the images sporadically fail to load (see screenshot).

this is the rendered code: 

<img alt="" loading="lazy" width="2000" height="2000" decoding="async" data-nimg="1" style="color:transparent;object-fit:cover" srcset="/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fexc2uuoy%2Fproduction%2F38bbb16282859b570116baaec5928318125d08f5-1966x2000.jpg%3Frect%3D0%2C17%2C1966%2C1966%26w%3D2000%26h%3D2000%26fit%3Dmax%26auto%3Dformat&amp;w=2048&amp;q=75 1x, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fexc2uuoy%2Fproduction%2F38bbb16282859b570116baaec5928318125d08f5-1966x2000.jpg%3Frect%3D0%2C17%2C1966%2C1966%26w%3D2000%26h%3D2000%26fit%3Dmax%26auto%3Dformat&amp;w=3840&amp;q=75 2x" src="/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fexc2uuoy%2Fproduction%2F38bbb16282859b570116baaec5928318125d08f5-1966x2000.jpg%3Frect%3D0%2C17%2C1966%2C1966%26w%3D2000%26h%3D2000%26fit%3Dmax%26auto%3Dformat&amp;w=3840&amp;q=75">


this is the code to render the img tag:

      <Image
        style={{
          objectFit: 'cover' as CSSProperties['objectFit'],
        }}
        width={2000}
        height={2000}
        alt=""
        src={urlForImage(source).height(2000).width(2000).url()}
        priority={priority}
      />


this is the code to get the image from sanity:

export const urlForImage = (source: any) => imageBuilder.image(source).auto('format').fit('max')


does anyone know what might be causing this, I've tried searching online to no avail

9 Replies

Gray Flycatcher
you can temporarily replace the next/image component with standard HTML img tag to see if the issue is related to the next/image component
And also you should consider that sometimes stale cache might cause images to fail loading sporadically.
@Gray Flycatcher And also you should consider that sometimes stale cache might cause images to fail loading sporadically.
Giant pandaOP
yeah, i think its the stale cache, how can i fix that?
Giant pandaOP
think i've figured out the cause: https://highpoint-building-and-roofing-ltd-git-feature-r-a4ed07-aaacafe.vercel.app/?_vercel_share=8oNMD61S8GM4fAKQHcDYEpOIcpXX4QgN

check out this preview enviroment, i wrapped all my url's with the following function:
export const appendTimeToUrl = (source: string) => {
  var url = new URL(source)
  url.searchParams.append('time', new Date().getTime().toString())
  return url.toString()
}

its not the perfect solution, do you have any ideas to make it better, i think it will never cache the image now
Gray Flycatcher
First of all, you need to consider checking console on your browser. (Error: Minified React error #425, #418, #423)
Giant pandaOP
hey, turns out there was a much better solution!
const imageProps = getSanityImageConfig(asset, props)

export const getSanityImageConfig: any = (asset, options) =>
  useNextSanityImage(getClientWithToken(readToken), asset, options)

<Image
  src={imageProps.src}
  loader={imageProps.loader}
  alt={props.alt}
  {...props}
/>
Gray Flycatcher
Great to hear that you found a better solution using useNextSanityImage This time was a good chance for me to learn from you instead leading you. haha.
I'd like you to keep in touch.