ngStyle 背景图像的 stackblitz 示例未在 DOM 中成功渲染图像
stackblitz example for ngStyle background-image is not successfully rendering image in DOM
我的目标是通过绑定到 background-image 属性来提供动态图像。这是一个 Stackblitz 举例说明问题的当前状态。
如你所见...
我已尝试清理输入元素样式的字符串。
我已经确保我的语法没有动态化是正确的。
我检查了类似的问题,但它们仍然非常不同,无法使用:
甚至 Gunter 的 post 也无济于事:
这是背景图片:
.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>
格式
我会考虑像 here in a forked version of your StackBlitz
那样做一些不同的事情
我们使用隔离的 :after
伪 class 提供渐变叠加层,因此它不会一直传递并且是静态的,以便于维护和减少膨胀。还允许您将 urls 存储为字符串而不是整个 url("blah/blah")
,因此您可以说抛出一个 url 的数组更容易等。您也不需要调用清理或其他冗余进程。
无论如何希望这对您有所帮助。干杯!
我的目标是通过绑定到 background-image 属性来提供动态图像。这是一个 Stackblitz 举例说明问题的当前状态。
如你所见...
我已尝试清理输入元素样式的字符串。
我已经确保我的语法没有动态化是正确的。
我检查了类似的问题,但它们仍然非常不同,无法使用:
这是背景图片:
.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>
格式
我会考虑像 here in a forked version of your StackBlitz
那样做一些不同的事情我们使用隔离的 :after
伪 class 提供渐变叠加层,因此它不会一直传递并且是静态的,以便于维护和减少膨胀。还允许您将 urls 存储为字符串而不是整个 url("blah/blah")
,因此您可以说抛出一个 url 的数组更容易等。您也不需要调用清理或其他冗余进程。
无论如何希望这对您有所帮助。干杯!