Next.js 10's New Image Component

[@landonschlangen]

You have some of the most unique thumbnails I've every seen.

[@leighhalliday]

Haha, thank you :) Those are very kind words!

[@systemmanager186]

You can control bit more with adding object fit properties to the IMAGE. It's like working with background image in Vanilla CSS

[@silenux7419]

Great video Leigh. Thanks. Only thing missing is the blur image effect from Gatsby.

[@leighhalliday]

True! I personally think it is missing cropping as well!

[@aminedaimallah310]

nice video, i can't wait to start learning nextjs

[@leighhalliday]

Thanks Amine! I have a fullstack react/nextjs course launching in the next 2 months, hopefully it will be able to help you!

[@aminedaimallah310]

@@leighhalliday oh really, i will definitely check it, i hope it won't be too long haha

[@sanctipaprichio]

thank you for clear explanation

[@leighhalliday]

Glad it helped!

[@bryan333333333333333]

You can do this: img { object-fit: cover } and it won't squish your image

[@leighhalliday]

Excellent! Thanks Bryan.

[@styfle123]

Next.js 10.0.2 will have `objectFit="cover"` as a property. You can try it on canary today. github.com/vercel/next.js/blob/canary/examples/image-component/pages/layout-fill.js

[@paulsimonongpin6689]

this is a problem that a lot of developers are experiencing using layout="fill". glad they added objectFit props to image component. but since I'm doing tailwind className="object-cover" works as well

[@susbedoo]

That thumbnail is a GOD level threat😅

[@leighhalliday]

Haha... basically I just find old/funny pics and put text next to them :D

[@rajashekhar433]

Thanks for the video and I'm facing one issue in a personal project that component level scss and adding images from css

[@leighhalliday]

Hey Raj! Sorry, not quite sure how to help you with that issue specifically.

[@polyander]

Thanks a lot for this, as always very useful. You say that cloudinary and imgix have their own Image components, which ones are you referring to exactly?

[@leighhalliday]

These ones: Cloudinary - www.npmjs.com/package/cloudinary-react Imgix - www.npmjs.com/package/react-imgix

[@polyander]

@@leighhalliday amazing, thank you! 🙂

[@rajashekhar433]

Thanks for the video Facing one issue that component level scss file. Onload scss page loaded but navigate to other page in this respective scss not loading

[@leighhalliday]

Hey Raj! I don't think this has anything to do with this video?

[@rajashekhar433]

@@leighhalliday yeah just asking for help🙁 🙂

[@ElmachitoSilbateador]

It's weird because in production, the image component doesn't work with a static image saved in public folder. But using a regular img tag, it worked for the same image

[@leighhalliday]

Hmmm... weird! I honestly don't know off the top of my head what the issue is.

[@roid1510]

Is it possible to use the image component on the background css variable?

[@monkeystylle]

can you set the props width and height in % like width={200%} instead of pixels? just like in css

[@soris_bergeevich_shoyarbinov]

oh btw nice periwig on the preview

[@leighhalliday]

Thank you! What's a periwig?

[@phillipgimmi1850]

thanks bud

[@sabirahmed6191]

Biggest drawback of using this I found was that the browser does not cache the images and request them all the time.

[@leighhalliday]

Hmm really? That's too bad!

[@sabirahmed6191]

@@leighhalliday yup found it weird considering we want to optimize the network requests. Wish the cache headers were forwarded from the source file.

[@poojagholap4221]

how can we put css classname inside Image tag ?

[@leighhalliday]

Not sure actually, does it work just with className prop?

[@poojagholap4221]

@@leighhalliday yeah it works

[@iamdeveloper2580]

Hi Leigh, Image shows incorrect images with correct URL, any idea about that?

[@leighhalliday]

Hey Developer! Sorry... not sure why :(

[@alfieqashwa]

So, if I configure cloudinary url in the next.config.js, and I persistence the public_id on prisma database, that's mean I can use Image from next/image instead of Image from react-cloudinary? and the code would be something like this: is that right? I'm just guessing and haven't try it yet. #cmiiw I already read the doc but still missed about this. Anyway, this is great tutorial as usual. Thank you.

[@leighhalliday]

That's correct, Alfie. That said, you lose the ability to use all of the Cloudinary goodness that "react-cloudinary" gives you... cropping, transformations, etc... so for the course I'm building, I actually stuck with Image from "react-cloudinary" because I wanted to be able to crop.

[@alfieqashwa]

@@leighhalliday me either. LoL...!! Oh my God, honestly I'm still feeling amaze about interaction on internet. What if there's no internet, a guy like me from Indonesia would never learn anything from you who live in Canada. Maybe it's because I can't talk about nextjs and prisma2 with my wife, or neighbours, and anyone in here. HAha :D

[@PB72UK]

What happens if the image is coming from an image server? Rather than public folder?

[@leighhalliday]

Hmm, I am not sure! You'll have to dive into the docs a bit to see how that works.

[@nikitarudenko2465]

At this point, next/image lacks two features IMO: 1. You can't use it for images that come from CMS because you need to know width and height somehow. You can't just drop in any image and it preserves the aspect ratio. Layout="fill" is weird and doesn't work as I expected. 2. I would like to see an option for the blurred image before it gets fully loaded like on Medium. I hope these will be added soon

[@leighhalliday]

I agree! I think cropping is missing as well.

[@wsymbiosis]

1. Good CMS output image properties like width, height, and alt so that should not be a problem. 2. Yes, layout="fill" is quite bad design-wise and should be rethought by the nextjs team. 3. I believe they are planning to release a medium-like initial blurred image

[@TheShapingSickness]

For some reason when I use this component the images are brought to the forefront as if they had z-index: 9999, elements are hidden behind the images, I can't fix this.

[@leighhalliday]

Hmm, I'm not sure off the top of my head. Does it say anything about this in their docs?

[@xthebumpx]

One thing I'm not clear on -- does the component work for both SSG and SSR?

[@leighhalliday]

Hey xdmx! I would imagine it's fine... that it just would render an `img` tag, but I haven't tried it :D

[@xthebumpx]

How do you use the Image component in a markdown file? can it only be done in mdx/js/ts file?

[@styfle123]

The Image component works everywhere React components do: mdx/jsx/tsx/etc. For plain md sources, you can use MDXProvider to map to like this blog post demonstrates nextjs.org/blog/markdown

[@leighhalliday]

Looks like styfle123 has you covered!

[@MobiusCoin]

This component isn't supported with SSG 😕

[@arcadan]

Seems its different when you work with img from getStaticProps, I tried to use Cloudinary to be the loader, but it doesn't work. The property of the images from getStaticProps is "HTTP://..." i wonder how I can use it to load these images properly.

[@leighhalliday]

Hmmm... I'm not sure what the issue is Daniel... sorry :(

[@programmer4047]

how can we do things like - background-size: cover;

[@leighhalliday]

Hey Programmer! I think you'd just link to an image like normal, you wouldn't use the new Image component.

[@rram6875]

Little by little Next is making Gatsby redundant. Now all it needs is a kickass plugin ecosystem.

[@leighhalliday]

I agree!! Next.js is my go-to React framework... I honestly think there are fewer and fewer use-cases where Gatsby makes sense. That said, I haven't converted www.leighhalliday.com from Gatsby to Next.js because there's some things I do there treating the MDX files as data that would be difficult to do in Next.js :D

[@andyslezak3606]

It’s like you’re a mind reader

[@leighhalliday]

Muahahah :D

[@ivanrg6406]

Be aware: Image Optimization does NOT work on layout fill. So this component is pretty useless.

[@leighhalliday]

Hey Ivan! What would you recommend as an alternative?

[@indycinema]

Dudes. This just makes the build/compile time grow as everything is converted into 5 different resolutions for every image in the blog/site. It is a massive catastrophe in Gatsby, for what a more cumbersome srcset? Bottom line. Images are not the same as code. Images need to be exported by a human who cares once, not every compile. Notice no one would do this for video files, because compilation time would be years. Chasing Gatsby is insane. You run the nytimes!

[@leighhalliday]

Hey Lawrence. This is all at run time, not build time... it generates them dynamically on the fly as they are requested. It won't add a single millisecond to build time :) This is a major difference between the Next solution and Gatsby's solution.

[@xthebumpx]

"Instead of optimizing images at build time, Next.js optimizes images on-demand, as users request them. Unlike static site generators and static-only solutions, your build times aren't increased, whether shipping 10 images or 10 million images." nextjs.org/docs/basic-features/image-optimization