Question 88721 in Javascript Question posted in
A very good W3school tutorial can be found here.

NextJs: Type declaration for images imported from public folder – Javascript

Can I know the what is the type declaration for images that are imported from public folder in nextjs.

I created a file called data in utils folder. Inside data file I imported the images from public folder and created a array of objects with keys like tile, desc, image.

For eg
const users = [ { avatar: img1, name: "some name", age: 12, }, { avatar: img2, name: "some name", age: 14, } ]

when i gave type for users obj it is showing an error of
Types of property 'img' are incompatible. Type 'StaticImageData' is missing the following properties from type 'HTMLImageElement': align, alt, border, complete, and 306 more.ts(2322)

Can some one tell me the exact type for images imported from public folder and used it in array of objects

I tried to change the staticimagetype but it is unable to find

Tags:

2

Answers


  1. 0

    To use the Next.js next/image component to display an image from the public folder, you can simply provide the image file path as the src prop of the next/image component.

    Here’s an example:

    import Image from 'next/image'

function MyComponent() {
  return (
    <div>
      <Image
        src="/images/my-image.jpg"
        alt="My Image"
        width={500}
        height={500}
      />
    </div>
  )
}

    In your case:

    if you want to use static path for images from public folder

    const users = [
  {
     name: "User Name1"
     image: "/images/user_image1.jpg"
  },
  {
     name: "User Name2"
     image: "/images/user_image2.jpg"
  }
]



<div>
  {
    users.map((user, index) => (
       <div key={`user-${index}`}>
           <Image src={user.image} alt={user.name} width={100} height={100}/>
           <h3>{user.name}</h3>
       </div>
    ))
  }
<div>

    And if you are going to use the image from object by importing it

    import UserImage1 from "../../public/images/user_image1.jpg";
import UserImage2 from "../../public/images/user_image2.jpg";

const users = [
  {
     name: UserImage1
     image: "/images/user_image1.jpg"
  },
  {
     name: UserImage2
     image: "/images/user_image2.jpg"
  }
]



<div>
  {
    users.map((user, index) => (
       <div key={`user-${index}`}>
           <Image src={user.image} alt={user.name} width={100} height={100}/>
           <h3>{user.name}</h3>
       </div>
    ))
  }
<div>
    Login or Signup to reply.
  2. 0

    When you import an image from a public folder, those images are parsed by the compiler as an object of type StaticImageData with all the necessary details of that image. They are not imported as components or HTML elements. This is why when you try to assign them to avatar property which has a type of HTMLImageElement, typescript gives you are type mismatch error. You can avoid this by using imported image data as src for Image component:

    import Image from 'next/image'
import UserImage from '../public/images/user.jpeg'

interface User {
  image: StaticImageData;
  name: string;
}

const users: User[] = [
  {
     image: UserImage
     name: "John"
  },
  {
     image: UserImage
     name: "Alen"
  }
]

export default function Users() {
  return (
    <div>
      {
        users.map((user, i) => (
          <div key={i}>
              <Image src={user.image} alt={user.name} width={100} height={100}/>
              <h3>{user.name}</h3>
          </div>
        ))
      }
    </div>
  )
}

    You can learn more about Next.js static file serving here and Next Image here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search