Image layout prop does not exists in TS

[Rechdan]

Bug report

(JSX attribute) layout: string
No overload matches this call.

To Reproduce

Just have Next in a project, import next/image and try to use layout prop like so:

<Background src='/img/header.png' quality={100} layout='fill' />

Expected behavior

A working prop that is recognized by the editor.

Screenshots

{
	"dependencies": {
		"next": "10.0.2-canary.4"
	}
}

System information

• OS: Windows
• Version of Next.js: 10.0.2-canary.4
• Version of Node.js: v14.15.0

Additional context

The prop is working but its not recognized by the editor.

[styfle]

You're example says Background instead of Image. Perhaps you are using the wrong component.

I confirmed that layout="fill" does work correctly with TS and it even offers the suggestion.

Make sure you use import Image from 'next/image' to import the correct component.

[Rechdan]

@styfle now I believe I found the real problem, when I use the Image Component with styled-components, the layout prop dos not shown up, any idea why?

[styfle]

Does it work with the standard import Image from 'next/image' usage?

If so, then it sounds like a bug with styled-components.

[Rechdan]

It works with the default import, that solves the problem, thanks!

[tobkle]

Missing type variation in packages/next/client/image.tsx ?

export declare type ImageProps = Omit<JSX.IntrinsicElements['img'], 'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading' | 'style'> & {
    src: string;
    quality?: number | string;
    priority?: boolean;
    loading?: LoadingValue;
    unoptimized?: boolean;
    objectFit?: ImgElementStyle['objectFit'];
    objectPosition?: ImgElementStyle['objectPosition'];
} & ({
    width?: never;
    height?: never;
    /** @deprecated Use `layout="fill"` instead */
    unsized: true;
} | {
    width?: never;
    height?: never;
    layout: 'fill';
   // BEGIN INSERT **************************************
    quality?: number | string;
    priority?: boolean;
    loading?: LoadingValue;
    unoptimized?: boolean;
    objectFit?: ImgElementStyle['objectFit'];
    objectPosition?: ImgElementStyle['objectPosition'];
    // END INSERT*****************************************
} | {
    width: number | string;
    height: number | string;
    layout?: Exclude<LayoutValue, 'fill'>;

[w1am]

It's still a problem for me. I came up with a workaround by wrapping the parameters in parentheses.
<Image {...{ height: "300px", width: "300", layout: "responsive", placeholder: "blur" }} objectFit="cover" src="..." />

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.