hyperapp: Height attribute on img element not working

I was using hyperapp 1.0.1 and this was working

<img src="https://i.pinimg.com/originals/87/b8/67/87b8671c2d08dc83554806539022bde7.gif" height="100px"/>

I update to hyperapp 1.1.2 and now it doesn’t work, but it does without the “px” like this

<img src="https://i.pinimg.com/originals/87/b8/67/87b8671c2d08dc83554806539022bde7.gif" height="100"/>

Here is the Codepen

So I went and check what changes were made, and apparently, this breaks after the version 1.0.2. The problem is here on line 138 where before it was always using setAttribute

if (value == null || value === false) {
    element.removeAttribute(name)	
} else {	
    element.setAttribute(name, value)	
}

and now is using

if (typeof value === "function" || (name in element && !isSVG)) {
    element[name] = value == null ? "" : value
} else if (value != null && value !== false) {
    element.setAttribute(name, value)
}

If the element has the attribute and because the image height attribute is an int and not a string it is set to 0.

It’s not a big issue you could just write the number without the “px”. However, there are people who use the “px” like I was doing and then the whole images on the site disappear. Probably there are similar cases like this with other elements.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 15 (9 by maintainers)

Most upvoted comments

const img = document.createElement('img')
img.height = 100                    // <img height="100" />
img.height = "100"                  // <img height="100" />
img.height = "100%"                 // <img height="0" />
img.height = "100px"                // <img height="0" />
img.setAttribute("height", 100)     // <img height="100" />
img.setAttribute("height", "100")   // <img height="100" />
img.setAttribute("height", "100%")  // <img height="100%" />
img.setAttribute("height", "100px") // <img height="100px" />

HTMLImageElement.height Is a unsigned long that reflects the height HTML attribute, indicating the rendered height of the image in CSS pixels. https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement

HTML <img> element height The intrinsic height of the image in pixels. In HTML 4, the height could be defined pixels or as a percentage. In HTML5, however, the value must be in pixels. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

I would prefer to keep current behavior when you must specify image height and with without px, not a bug IMO.

frenzzy on Mar 3, 2018