How do import a png to use for Next.js local images?

1

I wanted to use the Next Image component with local images.

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src={profilePic}
        alt="Picture of the author"
        // width={500} automatically provided
        // height={500} automatically provided
        // blurDataURL="data:..." automatically provided
        // placeholder="blur" // Optional blur-up while loading
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

I was wondering how to bind the import of an image blob.

I’ll answer my own question with the approach I found that works.
Feedback appreciated

2

I created a generic type 'png for the blob.

Image binding:

module ImageLocal = {
  @module("next/image") @react.component
  external make: (
    ~alt: string,
    ~className: string,
    ~height: int,
    ~src: 'png,
    ~width: int,
  ) => React.element = "default"
}

Then in the React component I import the file like this:

@module("../public/titi.png") external titi: 'png = "default"

Seems to work fine when I pass it as a prop

<Next.ImageLocal className="rounded " alt="titi" src={titi} width={90} height={90} />
3

You can replace 'png to string

4

if I console.log it I see an object

image
image1432×434 48.2 KB

5

Sorry, I guess we have different bundling configurations.

1 Like