代码之家 › 专栏 › 技术社区 › Ben

用相机拍摄的div背景图像离子3

background-image ionic3 camera ionic-framework cordova

Ben · 技术社区 · 6 年前

我有一张照片,是用手机摄像头拍的,结果是 http://localhost:8080/var/mobile/Containers/Data/Application/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/tmp/cdv_photo_001.jpg .

无论我尝试什么,我都无法设置给定div的背景图像(在该div上使用内联css)。

所以: <div style="background: url('{{ imageUrl }}');"> 不工作(div有高度和宽度,当我将背景设置为 yellow 我看到一个黄色的背景。

当: <img src="{{ imageUrl }}"/> 正在工作。

也: 当我试着从google随机获取一张图片时,比如 https://www.w3schools.com/w3css/img_lights.jpg ,它将该图像显示为背景图像。

对于CSS中的背景图像,URL格式是否有一些限制?

1 回复 | 直到 6 年前

Sandy..... 6 年前

在离子中,可以通过以下两种方式实现:
1]使用style.property绑定,如下所示:

<div [style.backgroundImage]="imageUrl"></div>

2]使用ngstyle绑定,如下所示:

<div [ngStyle]="{'background-image' : imageUrl}"></div>

推荐文章

Vida Khalili · 如何在Nextjs中设置背景图像?

2 年前

Laiqa Mohid · 反应-在使用SVG作为背景图像属性中的数据时,尝试将SVG填充颜色作为道具传递?

2 年前

user8076620 · javascript如何使用style属性查找包含背景图像的元素

6 年前

h2odev · 在具有动态宽度的div元素上调整背景图像

6 年前

Chris · 如何使用CSS缩放手机背景图像?

6 年前

Chris McCarthy · 如何在matplotlib雷达图中添加轮盘赌背景图像

6 年前

Fahim Parkar · UITextView背景图像正在滚动多行

6 年前

Polygami · 保持图像居中,同时保持100%的高度,仅延伸/裁剪侧面

6 年前

AlphaX · 如何交换透明背景图像

7 年前

TJ1 · 更改圆的背景图像

7 年前