时间戳

首页 > 解决方案 > ngStyle background-image 的 stackblitz 示例未在 DOM 中成功渲染图像

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

问题描述

我的目标是通过绑定到 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>格式

标签： angularimagelinear-gradientsng-class

解决方案

我会考虑在你的 StackBlitz 的分叉版本中做一些不同的事情

我们使用隔离的伪类提供渐变叠加，:after因此它不会一直传递并且是静态的，以便于维护和减少臃肿。还允许您将 url 存储为字符串而不是整体url("blah/blah")，因此您可以说更容易地抛出一个 url 数组等。您也不需要调用 sanitize 或其他冗余过程。

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

推荐阅读