Image component is cool, however: - I hope this video talks more about how "deviceSizes" and "sizes" work together - I currently find no way to remove the "blur" effect when using placeholder. In my case, I need to provide a solid default svg image. - The caching image url is pointed to the next server itself, it would be much better if we have a way to config this, maybe to point to a cdn url, to avoid DDOS, for example. - It will be awesome if there is a Picture component from next/picture, I need some behavior like switching different image urls in different breakpoints of screens. -> I think I should try to look into implementation of next/image to study the way it decide which width is the most suitable one with the screen, then create a Picture component myself. For anyone have solutions or ideas for these, I appreciate when you leave a comment 😍
Doing exactly like you did on the video, setting style={{maxWidth: "100%", height: "auto"}} is giving warning into console: "Image with src "abcdefg" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio." If I change maxWidth -> width I can get rid of the warning, but the layout explodes. I'm a bit confused...
Love all your videos on NextJS, and love NextJS and what you guys are doing atm @leerob but just had to point out, in the English language, “height” is not pronounced with the “th” sound at the end. It rhymes with words like “right” or “bite” 😅
Unfortunately, I still got this "Error: Image with src "/..." is missing required "width" property.". I've already set style which contains width and height like you did in this video. I got an error but you didn't. What should I do?😭
hey Lee if youre getting multiple images lets say for cards or a Hero section where you want the image to be 100% how can you do that with the ...coz the props for width and height dont take percentages.....
hi , I am using images from the public folder but when I build and see the src and the browser downloads it does not compress them and leaves them in .jpeg or .png form and in theory I should optimize them what am I doing wrong? that's how I use them import Image from 'next/image'
trying to do this, similar to how you did it in the video but I keep getting this error: Image with src "./SVG/tintin.svg" is missing required "width" property.
Two questions regarding nextjs before i jump. 1: IF i want to use nextjs just for client side rendering (cuz i like many features of it like Link), how can i use nodejs + nextjs ? 2: how to test Nextjs with jest + react testing library ?
1. Everything is still sent from the server, but your initial response from the server could be no HTML and then render everything on the client-side, if you really want, yes. 2. nextjs.org/docs/pages/building-your-application/optimizing/testing
"Images are only loaded when they enter the viewport using native browser lazy loading, with optional blur-up placeholders." Why is this not working for me? The layers tool shows me that below the viewport the images are loaded already. The sentence makes me think it's using intersection, is that not the case? Or am I missing something?
this next version big problem is state managementing. Please do something for this. Internal global state managementing or connect other state managementing tools at least. Thanks
Nice! Here's a question tho... Let's say I have two versions of an image, one for regular screens and one that's double in size for HiDPI screens, how can I tell Image to serve one over the other? The sizes prop isn't really letting me do that and I have to resort to using the regular img tag with the srcSet attribute and specify "/image.png, /image-2x.png 2x" for it to work properly.
This is the main issue with Image component. The only way to do this is with deviceSizes/imageSizes in next.config.js. There are multiple issues registered regarding this and Vercel does not even try to solve this...
I have the same doubt. HTML element has the srcset attribute which works with sizes attribute to tell it which image file download depending on browser width. How can use the equivalent in Nextjs?
Maybe it is possible using a custom loader which generates the right URL depending on the browser width, but I am not sure about that. I am researching it. If you find out the answer post here please
I have my frontend on nextjs 13 using app router and backed is in python django. And i want to use Image component currently both frontend and backend is on locally. Can you guide me how i can use the Image component of nextjs?
quick question, so its ok to put any value for width and height as long as you inline style with the maxwidth : 100% and height : auto properties when youre using remote images? nextjs will automatically avoid layout shifts and render with the aspect ratio? it looks like its doing that in my local project but im not definitely sure.
Yes, it works. The images would be optimized by the Next.js server when using `next start`. I'd recommend installing and using `sharp`, too. nextjs.org/docs/app/building-your-application/deploying#:~:text=If%20you%20are,excessive%20memory%20usage.
i don't get how this works? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-IU_qq_c_lKA.html how does it optimize images from a remote source? this seems like a fake feature, that does not actually work. unless you are doing an SSG, this is the only way that can actually work
This video leaves many questions unanswered. No information on how to do art directing for example. Can you really talk about responsive images without art direction? What about background images? I mean the real background images - CSS background-image property. Why can't it use it?
Very honestly, the Image component is one of the reasons why I really like Next. Image optimization is such a headache to think about, and having it built into my framework is easily one of the greatest possible things about it. There's no need for me to reach for Cloudinary or anything like that aside from storage.
That's funny. I've never used the Image component because it's so confusing. Literally never managed to get an image working using it. So it just gives me more headaches.
the question is how to use blurDataUrl for dynamic images (remote images) 1. should we save the 10px image data in database OR 2. save the 10px image and use plaiceholder lib to generate the data of the image - it would be nice if blurDataUrl accepted the src of an small image instead of its data (so we dont have to use yet another lib)
this doesnt work, Ive just tried to use the style property to set width and height (without the explicit width and height properties) and its not letting me:
I think the next step for the image component is to set the width and height and generate the blur version without having to import the image first, just using the normal /[your public assets].
It does, but you don't need to use it. To optimize your SVG, you'd want to use a different tool. next/image is for optimizing raster images like pngs, not vector images like svgs. Like SVGO! jakearchibald.github.io/svgomg/
nextjs14 if I set just width and hight within style property it doesn't work and it says is Error: Image with src blabla missing required "width" property. wtf?
Using next version 13.3.4 and when I use the first example in this video, what you called, "the most basic," I get the error 'missing required width property'. Why am I or how are you not? Solving this is why I'm here.
So when we import an image from the public directory we do not need to specify a width and a height or even use the fill prop ? But we need to use those props when the image is remote ?
The image width/height are automatically added when you import an image directly, yes. This works regardless if you use `fill` or not. When the image is remote, Next.js can't automatically determine that for you, so you have to add width/height to prevent layout shift.
how about using placeholder="blur" with images coming from a url, cms, cdn, ... I think that's a much more real world example and I'm struggling with that for a long time.
Hello. Is there any opportunity to have image optimization library for React JS like Next/Image, which way is common for plain React projects, to have CDN like Imagekit, Imgix or Cloudinary or there is another better way without CDN? I’m using Supabase storage in plain React app.
Thanks for this Lee! I was wondering how can i allow a 2mb image but during the upload itself it shrinks/compresses and THEN stores in the bucket at a much reduced size, saving some sorage space as well? Im using supabase. Thanks.
I was wondering why in the Image srcset generated when specifying the sizes property, all the sources have the same pixel dimensions ? Am I doing something wrong ? I would have guessed that the image's pixel dimensions would be different for each specified size
Can anyone tell me how to handle image from url with dynmic viewport sizes? I though to create a hook around viewport width and then generate image at run time (which will already be because its from a url) using the said width. Is any other way exists? Can this be done? Beside this, thanks for the heads up for all the new features of the image tag from next. I love it and your tutorials. 😉 🎉
Does anyone know why when I index a bunch of photos in nextJs, and import them they don't show, but when importing individual ones they work ? I'm trying to map them into a grid.
What happend with external images from a bucket? will the resize be made server side on the fly? or will store a cache for each image even if it is external?
My little Nigerian startup using the image component got charged using the image component and additional 50 usd I love the component but the cost is too high when you start getting some traffic
@@EmmanuelOdii80 so we are on the pro plan You get 5000 image optimisation free for a month after that you need to pay for additional optimisations. 5000 might seem like a lot but it really isn’t, it doesn’t even last for a week on our product.
SVG format is scalable by default, so you just need one icon for all the sizes. I would embbed SVG inline code as a React component instead of having a .svg file
Importing the image adds the width and height for you. If you are using a remote image, you need to either add the width and height yourself, or use the fill prop as shown in this video.
But for Nextjs 14 images are still throwing off error tried the below stuff but no use - protocol: 'https', hostname: 'example.cloudfront.net', port: " ", pathname: '/**',
