Next.js Discord

Discord Forum

Nextjs Image alt attribute and typeError.

Answered
Yellow croaker posted this in #help-forum
Open in Discord
Avatar
Yellow croakerOP
Hello i'm trying to give an alt attribute for Image


My nextJs Image looks like this:

     {resume.personalInfo?.imagePath && (
          <Image
            key={resume.personalInfo.imagePath}
            src={resume.personalInfo.imagePath}
            style={styles.image}
            alt="Picture of the author"
          />
        )}


I get this kind warning/error to my alt attribute:



No overload matches this call.
  Overload 1 of 2, '(props: ImageProps | Readonly<ImageProps>): Image', gave the following error.
    Type '{ key: string; src: string; style: { marginBottom: number; }; alt: string; }' is not assignable to type 'IntrinsicAttributes & (IntrinsicClassAttributes<Image> & Readonly<ImageProps>)'.
      Property 'alt' does not exist on type 'IntrinsicAttributes & (IntrinsicClassAttributes<Image> & Readonly<ImageProps>)'.
  Overload 2 of 2, '(props: ImageProps, context: any): Image', gave the following error.
    Type '{ key: string; src: string; style: { marginBottom: number; }; alt: string; }' is not assignable to type 'IntrinsicAttributes & (IntrinsicClassAttributes<Image> & Readonly<ImageProps>)'.
      Property 'alt' does not exist on type 'IntrinsicAttributes & (IntrinsicClassAttributes<Image> & Readonly<ImageProps>)'.ts(2769)
(property) alt: string
Answered by Yellow croaker
thanks seems that i had wrong import going on there!
View full answer

4 Replies

Avatar
English Angora
Did you import Image from next/image
Avatar
Chinese Crested Dog
Make sure you have the correct import (import Image from 'next/image';), and make sure your using it in a client component
Avatar
Yellow croakerOP
thanks seems that i had wrong import going on there!
Answer
Avatar
Chinese Crested Dog
No worries!