How to make use of the Next.js image component?

Developer Support
1

can we force plasmic to use Next.js’ Image component? or is there a way to force preload all images before painting the page? right now i’m seeing flickers between routing to different pages.

2

Hey @gothic_gull, we’re working in a image component that works like Next.js one. Right now it’s not straightforward to use next/image component with Plasmic, but a way you could do it is overriding the img elements using { as: Image, props: {...} } (where Image is next/image component; more information about overrides in https://docs.plasmic.app/learn/overrides/).

3

@tiago could you show an example of overriding the img (p.PlasmicImg) elements with codegen?

4

Hi @static_marmot! Do you want to override it with another image src or with a different element? If you want to override the image src with a /url/to/image.png with width 720 and height 480 you can use:

<PlasmicFoo
  imageElement={{
    props: {
      src: "/url/to/image.png",
      fullWidth: 720,
      fullHeight: 480,
    }
  }}
/>

If you want to replace the whole element with something else (like a text div) you can use:

<PlasmicFoo
  imageElement={{
    render: () => <div>text</div>,
  }}
/>
5

@tiago looking to replace all img with a different element (render).

I got it working with a new Plasmic component “Image” and then hacky replace using props.children.

imageElement on my codegen page didn’t work.

6

imageElement in my example above would be the name of your “image” element in studio (what you see in left sidebar). You can use as to replace the PlasmicImg with a different component like:

<PlasmicFoo
  imageElement={{
    as: YourOwnImageComponent,
  }}
/>

But if you want to replace all images with a different component, I think you indeed need to create a new Plasmic component like you did and then modify such element to render what you want.

7

Yeah, it works as intended just felt like there could be a way to substitute all elements via a prop (like all h1, button, a, or img). I made the image component and it rendered progressively as intended.

Would love to see in the future platform:nextjs and images.scheme:files could substitute p.PlasmicImg with next/image. Thank you!!