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.
Make `url()` wrapping more lenient in `background-image` -- even though not officially supported
See original GitHub issueI’ve found an issue using a data URI in the style for a node.
I’m trying to use embedded/inline SVG content. If I base64 encode it, there is no issue, e.g.
style:{'background-image': 'url(data:image/svg+xml;base64, ...long base64 string of SVG...)'}
This works OK
However SVG is a format that is better off not being base64 encoded (it actually ends up larger) so when I try this
style:{'background-image': 'url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"> ....blah rest of svg file here.... </svg>)'}
This results in cytoscape.js treating it as an external URL and attempts to make HTTP GET for a very strange URL, which obviously fails.
Omitting the ;utf8 part or trying ;charset=utf-8 has no effect.
Issue Analytics
- State:
- Created 7 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
I looked at the documentation (I should have done this from the start), and I was mistaken: Nowhere is
url()wrapping mentioned, and it’s unsupported. It’s only a coincidence that someurl()wrapping works, probably because it was under consideration in some very early version.I’ve added a patch that makes the check a bit more lenient, but you really ought to use just the URL in the interest of future compatibility.
Without
url()wrapping, both your SVG and my own test image work fine.I tried encoding the SVG data and it still doesn’t work in Cytoscape, it still thinks it is an external URL and attempts to fetch it over HTTP
Both the encoded and unencoded SVG data string work when I try
<img src='data:image/svg+xml,{svg_data_string}'