用于ngStyle background-image的stackblitz示例未在DOM中成功呈现图像

Question

我的目标是通过绑定到background-image属性来提供动态图像。这是一个Stackblitz举例说明问题的当前状态。

如你看到的...

我已经尝试清理我正在为元素样式提供的字符串。

我确保我的语法没有动态是正确的。

我检查了类似的问题，但它们仍然与使用情况太不相似：ngStyle background-image甚至Gunter的帖子没有帮助：Angular 2 ngStyle and background-image

这是背景图片：

.background-image{
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.9) 75%, white 110%),  url("https://www.futurity.org/wp/wp-content/uploads/2018/05/reading-on-grass_1600.jpg");

我只想把背景图像后面的字符串放在组件中，如下所示：

public imgSmall = 'linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.9) 75%, white 110%),  url("https://www.futurity.org/wp/wp-content/uploads/2018/05/reading-on-grass_1600.jpg")';

这样我可以在不在移动设备时将其更改为更高的分辨率。

我需要这种格式而不是<img src>格式

Answer 1

我会考虑像here in a forked version of your StackBlitz那样有点不同

我们使用隔离的:after伪类提供渐变叠加，因此它不会一直传递和静态，以便于维护和减少膨胀。还允许您将URL存储为字符串而不是整个url("blah/blah")，这样您就可以更容易地将一个url数组放在其中等等。您也不需要调用清理或其他冗余进程。

无论如何希望这有帮助。干杯!