How to restrict a nextjs Image component | Next.js | Page 1

tribal pelican Apr 19, 2024, 4:34 AM

#

How to restrict a nextjs Image component from displaying an image more than 5mb.Please let me know.

dull waveBOT Apr 19, 2024, 4:34 AM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

frigid eagle Apr 19, 2024, 4:35 AM

#

AFAIK there is no feature like that in next Image

#

but what I think you can do is

#

read metadata of the image file

#

write a conditional to whether render the image or not

#

but why would you need this feature tho?

tribal pelican Apr 19, 2024, 4:37 AM

#

@frigid eagle ,Thanks for your reply. Could you please give me an idea how could I read the metadata of that image <Image src={product.image} alt={product.name} width={200} height={200} />

tribal pelican Apr 19, 2024, 5:23 AM

#

@Hakuna Matata ,I went through their documentation and found that I can restrict max_height or max_width by using sizes prop.

frigid eagle Apr 19, 2024, 5:24 AM

#

I thought you were speaking about file size?

tribal pelican Apr 19, 2024, 5:31 AM

#

@frigid eagle ,you can restrict Image component from displaying if the size is more than 5mb. first convert 5mb into equivalent height & width by below formula : Size (in MB) = (Resolution in pixels) x (Color depth in bits) / 8 / 1024 / 1024 . Now use sizes props to define max-height & max-width.What do you think?

frigid eagle Apr 19, 2024, 5:32 AM

#

if you can do it, noice

#

I was thinking of direcly getting image size

tribal pelican Apr 19, 2024, 5:33 AM

#

Could you share your idea please.I will check in your way.I am confused how to get sizes via metatag.

frigid eagle Apr 19, 2024, 5:34 AM

#

I don't really have an idea on how to do that

#

but I assume that you can read the response content-length if you fetch an image url

#

you can maybe write some custom image wrapper

#

IDK

tribal pelican Apr 19, 2024, 5:35 AM

#

yes I am fetching an image as an url only. But how to get image sizes from an url?. I can use a wrapper too if I get those sizes directly from an image url.

frigid eagle Apr 19, 2024, 5:38 AM

#

I tried like this: https://jsbin.com/ziwivomeva/edit?js,console

#

maybe it helps you

tribal pelican Apr 19, 2024, 5:39 AM

#

@frigid eagle , Great content. Sure It will help me a lot. Thank you so much for your help.

frigid eagle Apr 19, 2024, 5:39 AM

#

Glad that I can help, once/if your problem is solved, consider marking answer as solution

tribal pelican Apr 19, 2024, 6:03 AM

#

resolved.Thanks @frigid eagle

frigid eagle Apr 19, 2024, 6:04 AM

#

noice, consider marking answer as solution

frigid eagle Apr 19, 2024, 6:04 AM

#

dull wave

^

tribal pelican Apr 19, 2024, 6:05 AM

#

How to mark answer as solution. Where is that option.

dull waveBOT Apr 19, 2024, 6:06 AM

#

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1230738324402999328 message)

#How to restrict a nextjs Image component