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数组抛出等等。您也不需要调用清理或其他冗余过程。

无论如何希望这会有所帮助。干杯！

ngStyle background-image的stackblitz示例未在DOM中成功渲染图像

1 个答案: