CSS background-image 不显示外部/直接图像url

Question

我正在尝试使用背景图像 CSS 属性来设置细胞景观图中某些节点的背景。

如果我使用：

'background-image': 'url(https://cdn3.iconfinder.com/data/icons/computer-system-and-data/512/1-256.png)',

它工作得很好。

但是，如果我使用这个（我真正想使用的图像）：

'background-image': 'url(http://app.ardoq.com/api/attachment/workspace/5d6521661fa32c5a0ca7094b/Cop_Pink_Icon.png)'

图片加载不出来。

据我所知，这两个 url 的区别在于，当我在浏览器中输入图像 url 时，后者会下载图像而不是显示图像。

当我处于普通 HTML 时，使用 img-tag 与后者 URL 一起使用，所以我不确定是什么导致这个 URL 不可用与背景图片 CSS 属性:

<img src='http://app.ardoq.com/api/attachment/workspace/5d6521661fa32c5a0ca7094b/Cop_Pink_Icon.png'></img>

Answer 1

未找到此图片结果。如果您想在项目中导入自定义图标，我会推荐一些图标托管网站，例如 icons8.com。

<img src='https://app.ardoq.com/api/attachment/workspace/5d6521661fa32c5a0ca7094b/Cop_Pink_Icon.png'></img>

Answer 2

所以这似乎是 CORS-error，我设法通过向我的图像添加代理来修复它 url。我使用 https://cors-anywhere.herokuapp.com 作为我的代理。

所以不是从

获取图像

https://app.ardoq.com/api/attachment/workspace/5d6521661fa32c5a0ca7094b/Cop_Pink_Icon.png

我改为从这里获取图像：

https://cors-anywhere.herokuapp.com/https://app.ardoq.com/api/attachment/workspace/5d6521661fa32c5a0ca7094b/Cop_Pink_Icon.png

CSS background-image does not display external / direct image url