NextJS priority and unoptimized images not loading width and height properly

user_8128290 0
Viewed 1461
        <Image
          id={`img_${index}`}
          key={`img_${index}`}
          src={url}
          alt={url}
          unoptimized={true}
          priority={true}
          layout="fill"
          objectFit='contain'
          onLoadingComplete={() => {
            if (!loadedUrls.includes(url)) {
              setLoadedUrls((loadedUrls) => [...loadedUrls.filter(x => x !== url), url])
            }
          }}
        />

for some reason on desktop this works great. But on iOS sometimes I have to refresh the page for the image to show. I inspected with Inspector on my iPhone and the image had no width or proper height from the static source image file. Yet when I reloaded the page after it's inital download of the images it was correct. Why....

nextjs-image next.js reactjs
1 Answers

In general, you should provide width/height unless its a statically imported file that next can analyze at build time.

Based on the code you provided, it looks like src={url} would evaluate to a image path and not a static image, i.e

import profilePic from '../public/me.png

See the documentation note on width

The width of the image, in pixels. Must be an integer without a unit. Required, except for statically imported images, or those with layout="fill".

If its the layout shifts you are concerned about you can also use aspect-ratio

user_137499570
Related