Next.js Discord

Discord Forum

Issue with Image component and dynamic height/width

Answered
Dan posted this in #help-forum
Open in Discord
DanOP
Hello, I tried to use the bot but it did not give any helpful solutions.

Here is my snippet:

<div
        data-hide-on-theme="dark"
        className={`h-[${height}] w-${width} relative shrink-0`}
      >
        <Image
          src={imageLight}
          alt={alt}
          fill={true}
          style={{ objectFit: "contain" }}
          priority={true}
        />
      </div>


The issue is that if I pass in dynamic height and width like this, the image doesn't display at all. If I hardcore the dimensions, it displays as intended. What is the issue here?

I looked in element inspector for both versions and it looks the same and the height/width is there so I'm not sure why it's empty when I use dynamic values
Answered by Oriental chestnut gall wasp
one thing you could do is something like this:

export default function Banner({extraClasses}) {
  return <div className={`flex flex-row other-pre-defined-classes ${extraClasses}`}/>;
}


And when you import that Banner component, you would be able to define the width, height, and any other classes you want to add like this:

<Banner extraClasses="w-[276px] h-[200px]" />
View full answer

21 Replies

Oriental chestnut gall wasp
Are you using Tailwind?
And is [${height}] a React prop?
If so, the problem is that Tailwind doesn't support dynamic classes like the one I think you're trying to build.
You can read about it in the docs here: https://tailwindcss.com/docs/content-configuration#dynamic-class-names
@Oriental chestnut gall wasp And is `[${height}]` a React prop?
DanOP
oops, small typo there but yea it's react prop but without the []. I am trying to pass it in like this 

height="[200px]"
width="[276px]"
Oriental chestnut gall wasp
Yeah, then the problem is exactly what I posted the link for. Tailwind is compiled at build time so it ignores props, which are determined at runtime.
DanOP
interesting. I do see the styles in the element inspector, so I wasn't suspecting tailwind to be the issue
well the cause of the issue? lol you know what I mean
I love this plugin for debugging tailwind in Chrome
would highly recommend you try it because it'll highlight which classes you have active for each element.
DanOP
do you have any suggestions on how to handle this, outside of what is suggested in the docs you linked. I am trying to make a reusable banner component. I can pass in the height and width into the image itself but the problem there is some cases I want it to take up 100% of the container it's in and Idk the dimensions ahead of time (well I do but don't wan to hardcode it), which is why this method is used
i'd have to think about how i'd want to map out these predfined dimensions / if I want to do that
Oriental chestnut gall wasp
I asked a similar question on the Tailwind Discord and got some good ideas for the reusable component I was building!
Oriental chestnut gall wasp
one thing you could do is something like this:

export default function Banner({extraClasses}) {
  return <div className={`flex flex-row other-pre-defined-classes ${extraClasses}`}/>;
}


And when you import that Banner component, you would be able to define the width, height, and any other classes you want to add like this:

<Banner extraClasses="w-[276px] h-[200px]" />
Answer
Oriental chestnut gall wasp
Because you're passing in a value to extraClasses that Tailwind can read at build time, that should do what you're looking for 🙂
DanOP
just to make sure I understand...the difference I see is passing the entire style instead of just that # (or actually the [] and the value with it), is that the difference?

It seems to work now
@Dan just to make sure I understand...the difference I see is passing the entire style instead of just that # (or actually the [] and the value with it), is that the difference? It seems to work now
Oriental chestnut gall wasp
yep, you're passing the entire style defined explicitly in your code at build time.
Glad it worked!
DanOP
thanks man 😄 🎉