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.

Not compatible in srcset attribute

See original GitHub issue

In the gatsby-image project, we’ve discovered in a PR being reviewed that SVG data URIs from this library are not compatible with the srcset attribute.

Only base64 or url-encoded work. The only notable difference from the example given, was literal spaces vs %20. In the srcset attribute, you provide a comma delimited list of URL/URIs and an optional space followed by a descriptor(eg 1x, 100w), if none provided they’ll use a default.

With the output from mini-svg-data-uri a console error is raised, and the srcset is ignored.


It might be worth mentioning on your README that mini-svg-data-uri will not work for this use-case? Or at least requires another pass to convert the spaces to %20, or this library provides some config/option to handle that?(it looks like you intentionally convert to literal spaces?)

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:10 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
tigtcommented, Jul 2, 2019

Should be up on npm as v1.1.3. Thank you for your patience and help!

1reaction
tigtcommented, Jul 2, 2019

Whoops, I completely goofed. I’ll publish a new version tonight.

Read more comments on GitHub >

github_iconTop Results From Across the Web

responsive images srcset not working - Stack Overflow
When used in an img tag, the srcset attribute leaves the decisions up to the browser in terms of which image to load...
Read more >
Srcset and sizes attributes | | Can I use... Support ... - CanIUse
The srcset and sizes attributes on img (or source ) elements allow authors to define various image resources and "hints" that assist a...
Read more >
HTMLImageElement.srcset - Web APIs | MDN
The HTMLImageElement property srcset is a string which identifies one or more image candidate strings, separated using commas ( , ) each ...
Read more >
Browser Compatibility of Srcset and sizes attributes on Safari 13
Srcset and sizes attributes is Fully Supported on Safari 13, which means that any user who'd be accessing your page through Safari 13...
Read more >
What Img Srcset Does In HTML5: A Quick & Simple Guide »
5 Values of the srcset Attribute; 6 All Attributes of img Element ... Providing much larger images does not leave everyone else unaffected....
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