flex image加载图片

看img1.source的帮助:

spark.components.Image.source(value:Object):void


用于位图填充的源。可以呈示基于各种图形源的填充,其中包括:

    Bitmap 或 BitmapData 实例。
    表示 DisplayObject 子类的类。BitmapFill 会将该类实例化并为其创建位图呈示。
    DisplayObject 的实例。BitmapFill 将其复制到 Bitmap 中以供填充使用。
    外部图像文件的名称。



直接一句就行了

img1.source="assets/2_24x24.png";


另外可直接加载web图片(好像bmp的不行,不显示,png的可以):

                img1.source="http://localhost:8080/dbserver/6_1.png";
                img1.width=24;img1.height=24;

在uni-app中实现图片加载时显示loading效果,可以通过监听图片加载事件,并在图片开始加载时展示loading动画,当图片加载完成或失败时隐藏loading动画。这里有一个基本的实现步骤: 1. 在页面上添加一个图片组件以及一个用于显示loading的组件(比如一个简单的遮罩层或者动画)。 2. 设置图片组件的`lazy-load`属性为`false`,确保图片加载时触发加载事件。 3. 监听图片组件的`load`事件和`error`事件。在`load`事件触发时,调用一个函数显示loading动画;在`error`事件触发时,同样调用一个函数来处理错误并隐藏loading动画。 4. 实现显示和隐藏loading动画的函数。这通常涉及到控制loading组件的显示和隐藏属性,或者通过改变CSS类来控制其可见性。 以下是一个简单的代码示例: ```html <template> <view> <!-- 显示loading动画的组件 --> <view v-if="showLoading" class="loading-mask"> <!-- 加载动画效果 --> </view> <!-- 图片组件 --> <image class="my-image" mode="aspectFit" src="your-image-url" @load="handleImageLoad" @error="handleImageError" ></image> </view> </template> <script> export default { data() { return { showLoading: false // 控制loading显示的变量 }; }, methods: { // 图片加载开始时执行的函数 handleImageLoad() { this.showLoading = true; // 显示loading动画 // 可以在这里添加更多的逻辑,比如设置定时器隐藏loading等 }, // 图片加载失败时执行的函数 handleImageError() { this.showLoading = false; // 隐藏loading动画 // 处理图片加载失败的逻辑 } } }; </script> <style> /* loading动画的样式 */ .loading-mask { position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */ display: flex; justify-content: center; align-items: center; } </style> ``` 在上面的代码中,我们定义了两个方法`handleImageLoad`和`handleImageError`来分别处理图片加载的开始和结束事件,从而控制loading动画的显示与隐藏。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值