content-loader

content-loader copied to clipboard

Thanks for the fantastic library! I came across an issue with it, and hopefully the below provides a solution too:

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

When using queryParams in an Angular project, window.location.pathname is not sufficient to determine the URL. SVGs appear black in Safari as a result.

Expected behavior

SVGs should display as normal in Safari, even when using queryParams.

Minimal reproduction of the problem with instructions

A new Angular project, with content-loader installed, and a single route. Add a queryParameter to the end of the URL, and the SVG will no longer load.

What is the motivation / use case for changing the behavior?

Fix a bug

Environment

Angular version: Any

Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [x] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
Others:
The following fork includes a commit which appears to fix this issue:

https://github.com/timminss/content-loader

Thanks. You're welcome to submit a PR.

+1

@NetanelBasal, I could be wrong but it doesn't look like baseUrl is needed in the fill and clip path. Removing seems to work the same and it fixes the bug. I tested in safari too, since @timminss mentioned that.

Try to check in previous issues why we added it.

Oh! My mistake

@Steven-Harris try to see if the React version made some updates we can use here.

Dang... They are doing something similar. The default is empty instead of window.location.pathname. However they do recommend passing windows.location.pathname if you are using a base tag

baseUrl?: string - Web only

Required if you're using <base url="/" /> document <head/>.  Defaults to an empty string. This prop is common used as: <ContentLoader baseUrl={window.location.pathname} /> which will fill the SVG attribute with the relative path. Related #93.

Source Code

I've updated the library to the same code as the original React one. It should work now.