Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Image] htmlWidth and htmlHeight are broken

See original GitHub issue

Describe the bug A clear and concise description of what the bug is.

The htmlWidth and htmlHeight attributes have stopped working. The underlying <img> element does not get a width or height attribute set on it.

Expected Behavior A clear and concise description of what you expected to happen.

The underlying <img> element should get a width or height attribute set on it.

Link to minimal reproduction Please provide a codesandbox link or GitHub repo with a minimal reproduction of the issue.

https://codesandbox.io/s/damp-moon-hd1ys

Desktop (please complete the following information):

OS: [e.g. iOS] MacOS latest
Browser [e.g. chrome, safari] Chrome latest

Additional context Add any other context about the problem here, or some background information of how you ran into this bug.

Chakra 1.0.0 RC2.

Issue Analytics

State:
Created 3 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

1reaction

grevencommented, Aug 18, 2020

Was actually just trying to find out where the issue with the image width and height was. It looks like the problem lies in the change to the evaluation of the valid props in should forward prop, before .next.5 there was some custom logic but now it is using @emotion/is-valid-prop which doesn’t take into account the custom tags htmlWidth and htmlHeight.

This is the previous should-forward-prop: https://github.com/chakra-ui/chakra-ui/blob/43095f744aebf183d29bd4a3503d897ffc0ddf94/packages/system/src/should-forward-prop.ts#L47

1reaction

ferosscommented, Aug 18, 2020

Seems to work in 1.0.0-next.4 and is broken in 1.0.0-next.5. Hope this is helpful!

Top Results From Across the Web

Image height and width not working? - Stack Overflow

The width and height attributes are being overridden by your stylesheet, so you need to switch to this format.

Setting Height And Width On Images Is Important Again

width is set on the element in HTML; height (or width ) is set in the CSS — including using percentage values like...

Problems with <Image /> component · Issue #149 · chakra-ui ...

I'm running into several problems with the <Image /> component which I'll outline below. Problem 1 - <img /> width / height props....

Image Stretched Vertically: Responsive Email Question - Litmus

If you are using a set HTML height, then it is staying at that height and thus looks vertically stretched because it isn't...

Stretching body to full viewport height: the missing way

It happens because of the fixed html height, and it doesn't matter whether it's height: 100% or height: -webkit-fill-available . Broken gradient ......