Flex中Image加载图片出错时显示默认图片的几种方法

妖精的绣舞 提交于 2019-12-18 07:25:04
Flex中Image加载图片出错时显示默认图片的方法主要有以下几种:

方法一:利用 brokenImageSkin 风格显示一个默认的图,只需设置CSS就行了,如下:
<mx:Style>
     Image {
         brokenImageSkin: Embed("assets/404.jpg");
     }
 </mx:Style>
 
方法二:监听Image组件的IOErrorEvent.IO_ERROR事件,代码如下:
private function errorHandler():void
{
    image.source = "assets/404.jpg";
}
<mx:Image id="image" source="http://不存在.jpg" ioError="errorHandler()"/>

方法三:继承Image类,覆盖其set source方法,如下:
override public function set source(value:Object):void
{
    if(!value || value == ""){
        value = "assets/404.jpg";
    }
    super.source = value;
}

推荐使用第三种方法,因为第一种方法跟第二种方法有个共同的缺点,如下情况:
<mx:Image id="image" source="" ioError="errorHandler()"/>
此时无论是第一种方法还是第二种方法都不会显示默认图片,而第三种方法就可以解决这个问题。
第三种方法具体实现及使用方法如下:

MyImage.as

package
{
import flash.events.IOErrorEvent;
import mx.controls.Image;
public class MyImage extends Image
{
private var defaultImage:String = "assets/404.jpg";
public function MyImage()
{
this.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
}
override public function set source(value:Object):void
{
if(!value || value == ""){
value = defaultImage;
}
super.source = value;
}
private function ioErrorHandler(event:IOErrorEvent):void
{
super.source = defaultImage;
}
}
}

Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<local:MyImage id="image" source=""/>
</mx:Application>

推荐使用第三种方法。
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!