preact ignores/rewrites <img> dimensions?

I have a React-managed page with some 175+ images, and after switching from react to preact-compat (using the webpack alias solution) all my images come out as <img src="..." width="0" height="0"> in the DOM, despite having defined dimensions in the JSX source code (e.g. <img src="..." width="100px" height="50px"/> etc) - is there any reason why it does this? Because that seems like a pretty crazy bug.

[leeoniya]

dimension attrs must not have units [1]. so i’m not sure what all the fuss is about.

[1] https://www.w3.org/TR/html5/embedded-content-0.html#dimension-attributes

[robertknight]

@Pomax - It sounds like you’re still not sure what’s going on. I’ll try to see if I can explain:

Internally, what happens when Preact renders the <img src='invalid' width="400px" height="400px"/> in your JSX is roughly this:

1. The JSX code above is turned by Babel into h('img', { src: 'invalid', width: '400px', height: '400px' })
2. The result of the h(...) function call is a data structure that looks like this:

{
  nodeName: 'img',
  attributes: {
    src: 'invalid',
    width: '400px',
    height: '400px',
  },
  children: [],
}

1. Internally, Preact then takes the data structure from step (2) (vdomElement below) and creates an actual DOM element:

var node = document.createElement(vdomElement.nodeName);
// ...
for (var key in vdomElement.attributes) {
  // Does `node` have a property matching the prop name?
  if (key in node) {
    // Yes, set the property.
    node[key] = vdomElement.attributes[key];
  } else {
    // No, use `setAttribute`
    node.setAttribute(key, vdomElement.attributes[key]);
  }
}
// ...
parentElement.appendChild(node);

1. In the case when vdomElement.nodeName is img, node is an HTMLImageElement, which does have properties called width and height so what ends up getting executed is:

var node = document.createElement('img');
node.src = 'invalid';
node.width = '400px';
node.height = '400px';

Try the code from step (4) in your browser console and then print out the values of node.width and node.height.

Now on the other hand, try this:

// This is what happens when the browser parses the HTML string '<img width="400px" height="400px">'
var node = document.createElement('img');
node.setAttribute('width', '400px');
node.setAttribute('height', '400px');
console.log(node.width, node.height);

You’ll see different results.

Does this make things clearer?