question-mark
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.

Width of img becomes zero when using spread props

See original GitHub issue

Describe the bug

When using width attribute along with spread props on img, width is always zero.

<img {src} width="100%" alt="Alt text" {...someObject} >

The rendered HTML has width="0"

Reproduction

REPL REPL uses $$restProps but bug occurs with spreading any object.

image

Logs

None

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i5-8300H CPU @ 2.30GHz
    Memory: 1.25 GB / 7.85 GB
  Binaries:
    Node: 16.6.0 - C:\Program Files\nodejs\node.EXE
    npm: 7.21.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (93.0.961.52)
  npmPackages:
    svelte: ^3.42.6 => 3.42.6

Severity

annoyance

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
apfelboxcommented, Sep 22, 2021

As far as I understand it (and how MDN and the WHATWG write it), width="100%" is just invalid.

width The intrinsic width of the image in pixels. Must be an integer without a unit.

It seems like style="width: 100%" should be used here.

1reaction
mhkellercommented, Jul 10, 2022

Is there any update on this? Spread props are super useful but seems like they’re best to be avoided until this gets resolved…

Read more comments on GitHub >

github_iconTop Results From Across the Web

A better <img> tag - Matthew Cheok
This fixes the issue whereby if no height and width (or corresponding styles) are specified, we would end up with a zero-by-zero element....
Read more >
How to fix explicit width & height error in Next.js v10 Image ...
When using Nextjs image component without explicit height & width or layout="fill" prop, the following error is thrown: "Error: Image with ...
Read more >
react.js Replace img src onerror - Stack Overflow
I am trying to replace the image with a default image if the image does not exist and there is a 404 error....
Read more >
Can't pass props with excess properties · Issue #15463 - GitHub
With the above mentioned version I can't spread Props objects anymore to child React components, when the Props don't match up 100%.
Read more >
Passing Props to a Component - React Docs
You can specify a default value like size = 100 , which is used for missing and undefined props. You can forward all...
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 Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found