Optimized image component that works like next/image

Ideas and Feedback
1

Hey plasmic team, can you give us any update on the image component that works like next/image and you said you were working on? This is still a huge pain for us right now. We are currently using a code component that uses next/image, but that doesn’t allow us to use Plasmic’s image management anymore and instead relies on URLs. It would be great to have native support in Plasmic for this.

2

CC @inclined_boar We are working on enabling PlasmicImg for more and more projects.

3

can you share the project ID?

4

Also are you using codegen or loader?

5

Our main project has the following id: 6Wru3mcZP4xcAwBuVcobJh

6

We would happily try out the some kind of beta version of PlasmicImg!

7

Oh and we are using codegen, does that mean it won’t work for us yet?

8

Ok! I’ve enrolled your project into the beta. Please update your plasmic.json file like this, setting images.scheme to “cdn”

"images": {
  "scheme": "cdn"
}

And then run plasmic sync and let us know if it works for you! You should notice that the images are now served from Plasmic CDN:

image.png
image.png1298×1304 309 KB

9

Thanks for adding our project! Are plans to allow using the default next/image component any time soon? What I liked in Plasmic so far was the fact that it didn’t force using Plasmic for anything else apart from the dev process. I would be more comfortable if I could provide hosting for our own images. Does this allow changing images via React props? For instance, we need to display images stored in S3.

10

Hi! Yes you can still point to images in your S3 bucket. We wouldn’t be able to resize and serve the optimal image sizes for you; but if you tell us what the full width/height of your image is, we can still help you make sure that the vertical space is correctly preserved:

<PlasmicSomething img={{
  // pass in an object instead of just a src string, 
  // with full width/height specified
  src: : {
    src: "<https://s3bucket/blah.png>"
    fullWidth: 3000,
    fullHeight: 2000
  }
}}/>
11

Hi,
Is this image component that works as next/Image implemented in plasmic or is it still in beta version?