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.

simple property assignment fails to set img width

See original GitHub issue

I’m facing some incompatibility when replacing react with preact. It seems the way preact sets attributes ( - simply by setting a property) is not safe.

My use case is a simple img component that receives width and breaks with the value of 100% because of the the following:

const img = document.createElement('img');
img.width = '100%';
console.log(img.width); // 0

And what I think should be done (this is what react does)

const img = document.createElement('img');
img.setAttribute('width', '100%');
console.log(img.width); // expected value (automagically defined by the browser)

Unfortunately, changing setProperty to

function setProperty(node, name, value) {
  try {
    node.setAttribute(name, value);
  } catch (e) { }

isn’t enough… I think we might have to do some checks before knowing which kind of property setting we should do (simple assignment or setAttribute)… Any thoughts?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:23 (13 by maintainers)

github_iconTop GitHub Comments

developitcommented, Aug 21, 2017

It’s an open bug, typically open bugs represent broken promises.

developitcommented, Jan 11, 2017

@enapupe I’m open to the test idea - it was also proposed in #242.

Regarding the String suggestion - the reason this is useful is because Preact cannot support property whitelists given the filesize constraints we have placed on the library. Instead, we need to look for other ways to implement conditions - if the String type of a value can be used to fix this bug without causing a performance degradation for other String props, that’s probably what will end up being used since it’s only a couple of bytes (and thus much smaller than a whitelist).

It’s also worth noting that I think this issue would apply more broadly to other DOM properties. height is the obvious one, but there are others - for example list and type are already blacklisted for similar reasons. Maybe our solution to this issue will enable us to remove those specific blacklists and reduce the bundle size 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

simple property assignment fails to set img width #492 - GitHub
I'm facing some incompatibility when replacing react with preact. It seems the way preact sets attributes ...
Read more >
self.image.frame.width = 20 give get only property error
get-only means you can only read this property (for example to compare with something), but not change. To set width you need this:...
Read more >
How to fix explicit width & height error in Next.js v10 Image ...
The image component of Nextjs v10 doesn't respect any height, width, maxwidth, maxheight styles. When using Nextjs image component without ...
Read more >
How to set the width and height of an image using HTML
Example 2: In this example, we will not assign width and height value so the image will display with its original height and...
Read more >
HTML DOM Image width Property - W3Schools
Definition and Usage. The width property sets or returns the value of the width attribute of an image. The width attribute specifies the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found