I'm trying to use the background-image CSS property to set the background of some nodes in a cytoscape-graph.
If I use:
'background-image': 'url(https://cdn3.iconfinder.com/data/icons/computer-system-and-data/512/1-256.png)',
it works perfectly fine.
However, if I use this (the image I actually want to use):
'background-image': 'url(http://app.ardoq.com/api/attachment/workspace/5d6521661fa32c5a0ca7094b/Cop_Pink_Icon.png)'
the image does not load.
The difference between these two url's as far as I can see, is that the latter downloads the image instead of displaying it when I enter the image url in my browser.
Using the img-tag works with the latter URL when I'm in just plain HTML, so I'm not sure what's causing this URL not to be usable with the background-image CSS property:
<img src='http://app.ardoq.com/api/attachment/workspace/5d6521661fa32c5a0ca7094b/Cop_Pink_Icon.png'></img>
So this seemed to be a CORS-error, and I managed to fix it by adding a proxy to my image url. I used https://cors-anywhere.herokuapp.com as my proxy.
So instead of fetching the image from
https://app.ardoq.com/api/attachment/workspace/5d6521661fa32c5a0ca7094b/Cop_Pink_Icon.png
I fetch the image from this instead:
https://cors-anywhere.herokuapp.com/https://app.ardoq.com/api/attachment/workspace/5d6521661fa32c5a0ca7094b/Cop_Pink_Icon.png