Next.js Discord

Discord Forum

Why is it yelling at me -> ImageProps

Answered
Australian Freshwater Crocodile posted this in #help-forum
Open in Discord
Australian Freshwater CrocodileOP
I'm creating a custom image component with ImageProps
Answered by Asiatic Lion
You could try

'use client'
import React from 'react'
import Image, { ImageProps } from 'next/image'

const FadeInImage = ({alt, ...props} : ImageProps) => {
  return (
    <Image alt={alt} {...props}></Image>
  )
}

export default FadeInImage
View full answer

7 Replies

Australian Freshwater CrocodileOP
'use client'
import React from 'react'
import Image, { ImageProps } from 'next/image'

const FadeInImage = ({...props} : ImageProps) => {
  return (
    <Image {...props}></Image>
  )
}

export default FadeInImage
Asiatic Lion
You could try

'use client'
import React from 'react'
import Image, { ImageProps } from 'next/image'

const FadeInImage = ({alt, ...props} : ImageProps) => {
  return (
    <Image alt={alt} {...props}></Image>
  )
}

export default FadeInImage
Answer
Australian Freshwater CrocodileOP
yes that works, but... why do I need that?
Australian Freshwater CrocodileOP
like, it should be included in "props" no?
Asiatic Lion
probably the ESLint plugin doesn't recognize it properly. I would guess it only checks for alt being added manually
Note that passing props as spread attribute without explicitly the necessary accessibility props defined will cause this rule to fail. Explicitly pass down the set of props needed for rule to pass