ImageMedia on template/website not uses `loader`

[tori-takashi]

Documentation Issue

I've just faced an issue trying with this official tutorial video
This video uses website template but I couldn't continue after seeding data.

$ pnpm run dev --port=3050
...
 ⨯ Error: Invalid src prop (http://localhost:3050/api/media/file/image-hero1.webp?2025-04-14T11:41:36.871Z) on `next/image`, hostname "localhost" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
    at defaultLoader (../../../src/shared/lib/image-loader.ts:70:16)
    at eval (../../../src/shared/lib/get-img-props.ts:239:13)
    at Array.map (<anonymous>)
    at generateImgAttrs (../../../src/shared/lib/get-img-props.ts:237:7)
    at getImgProps (../../../src/shared/lib/get-img-props.ts:693:24)
    at eval (../../src/client/image-component.tsx:394:64)
  68 |         const { hasRemoteMatch } = require('./match-remote-pattern')
  69 |         if (!hasRemoteMatch(config.domains, config.remotePatterns, parsedSrc)) {
> 70 |           throw new Error(
     |                ^
  71 |             `Invalid src prop (${src}) on \`next/image\`, hostname "${parsedSrc.hostname}" is not configured under images in your \`next.config.js\`\n` +
  72 |               `See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host`
  73 |           ) {
  digest: '4002068781'
}

It seems this documentation https://nextjs.org/docs/pages/building-your-application/optimizing/images is related to this problem, I didn't check deeply though.

To deal with it

Remove getClientSideURL()

If getClientSideURL() uses, show the error below.

payload/templates/website/src/components/Media/ImageMedia/index.tsx

Line 47 in 85e6edf

src = `${getClientSideURL()}${url}?${cacheTag}`

After remove it, it was fixed.

src = `${url}?${cacheTag}` // <- src props should be passed only relative path.

Pass loader props to NextImage

If src string is not a relative URL, loader function should be passed.

payload/templates/website/src/components/Media/ImageMedia/index.tsx

Lines 59 to 76 in 85e6edf

	return (
	<picture className={cn(pictureClassName)}>
	<NextImage
	alt={alt || ''}
	className={cn(imgClassName)}
	fill={fill}
	height={!fill ? height : undefined}
	placeholder="blur"
	blurDataURL={placeholderBlur}
	priority={priority}
	quality={100}
	loading={loading}
	sizes={sizes}
	src={src}
	width={!fill ? width : undefined}
	/>
	</picture>
	)

  return (
    <picture className={cn(pictureClassName)}>
      <NextImage
        alt={alt || ''}
        className={cn(imgClassName)}
        fill={fill}
        height={!fill ? height : undefined}
        placeholder="blur"
        blurDataURL={placeholderBlur}
        priority={priority}
        quality={100}
        loading={loading}
        sizes={sizes}
        src={src}
        loader={imageLoader} // <- should be passed loader props like the documentation above.
        width={!fill ? width : undefined}
      />
    </picture>