Image with src has a "loader" property that does not implement width. Please implement it or use the "unoptimized" property instead.

[trevorpfiz]

Seems that the loader property is not optimized.

Next.js error link

[shaunchander]

Also experiencing this issue when using the fill property.

[pakeecbala]

Any solution or patch for this issue?

[lorenzodejong]

I've just released version 6.0.0, could you check if the issue still occurs?

Also check out the updated installation docs (https://github.com/lorenzodejong/next-sanity-image#installation). Some people were running into an issue where specifying loader: "custom" in the next.config.js caused similar errors with the loader prop.

Otherwise please provide a reproducible case (from a CodeSandbox). I don't seem to be getting this error from my local setup.

[michael-land]

still see this issue with 6.0.0

[mitchuman]

Seeing the issue for all of my images on v6.0.0. I'm not sure if my implementation is invalid or there is something wrong with next-sanity-image.

Here is how I've implemeted (simplified):

// Img.tsx
import Image from 'next/image'

return <Image
  // @ts-ignore
  {...useNextSanityImage(client, image, options)}
  className={className}
  alt={alt || image.alt || ''}
  {...props}
/>

// Component.tsx
import Img from 'Img'

return <Img
  image={image}
  options={{ imageBuilder: b => b.width(400) }}
/>

Which produces the following errors in the browser console logs:

Image with src "https://cdn.sanity.io/images/...-500x500.png?h=400&auto=format"
has a "loader" property that does not implement width.
Please implement it or use the "unoptimized" property instead.
Read more: https://nextjs.org/docs/messages/next-image-missing-loader-width

[philipppolder]

Any update on this?

[bradley]

Also seeing this.

[lorenzodejong]

As mentioned before, if you could provide a reproducible example in a Codesandbox (without your Sanity token) i could take a look at the issue. For now i can't reproduce the issue on my local environment, so it seems like this has something to do with specific setup and/or dependency versions.

[philipppolder]

Hi Lorenzo, here's a minimal CodeSandbox: https://codesandbox.io/p/sandbox/quizzical-heisenberg-fdwpfd

You just need to add your own projectId and any asset object. The warning should be in the browser's console.

Hope this helps and thanks for taking the time!

[lorenzodejong]

Hey @philipppolder thank you for providing the example.

I just investigated this issue, and it seems like it has to do with the way you are providing a custom imageBuilder.

If you change the implementation to the following the warning will not be triggered:

const myCustomImageBuilder = (imageUrlBuilder, options) => {
  const result = imageUrlBuilder.quality(75);

  if (options.width !== null) {
    return result.width(options.width);
  }

  return result;
};

The reason for this is that Next.js expects the passed width in the URL as a query parameter, however exclusively if that's passed to the loader.

It's a pretty specific scenario that's also not documented well in the example of this library.

I will make sure to update the example to follow this example. For now i think you should be able to make it work by changing this in your application's code!

[lorenzodejong]

@mitchuman in your example you're actually circumventing the use of a responsive image. You're always returning an image with a width of 400, are you sure you require responsive images in your application?

If that's not the case you could just use the Sanity image URL directly and potentially mutate it with @sanity/image-url, just like this library does internally.

[luigifgp]

this issue persist on next 13 using app directory

[andershagbard]

Persisting in Next14 app directory

[Ojay]

Yeah I'm seeing the same in Next 14, codebox here.

Any help is greatly appreciated, thanks!