Flex中图片绑定的一点感触_flex 一个图片如何插入到另一个图片中-优快云博客

本文介绍如何在Flex4的DataGrid中正确显示图片。通过使用Bindable和Embed注解绑定图片资源，并设置正确的source属性，成功实现了DataGrid中图片与文字的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天由于工作的需要，要在FelxViewer原有框架的基础上添加一个widget。Widget主要是显示一些图例和文字。于是我在widget中放置了一个DataGrid，DataGrid有两列，一列放置图片，一列显示文字。

下面是在Flex4中，dataGrid里面放置Image的mxml代码。

     <mx:DataGridColumn headerText="图例" dataField="image">
      <mx:itemRenderer>
       <fx:Component>
        <mx:Image width="100" height="50" source="{data.image1}">
        </mx:Image>
       </fx:Component>
      </mx:itemRenderer>
     </mx:DataGridColumn>

刚开始的时候，我直接在source中设置的图片的路径，可惜就是不显示图片。于是我怀疑自己路径写错了。从双引号改为单引号，能想的办法都想了。后来从网上看到一个老外说图片的路径最好用bindable和embed绑定，不然的话可能会显示不出来。实验了一下果然如此。

   [ Bindable]
   [Embed(source="assets/images/globe.png")]
   public var imgObject:Class;

   [Bindable]
   [Embed(source="assets/images/cn.png")]

   public var imgObject2:Class; private var dataProvider:ArrayCollection;
      protected function LegendWdg_creationCompleteHandler(event:FlexEvent):void
   {
    dataProvider=new ArrayCollection([{image1:imgObject,content:"图例一"},{image1:imgObject2,content:"图例二"}]);
    legendDG.dataProvider=dataProvider;
   }

还有一点需要说明。因为我是一个菜鸟，之前没在Flex中用过datagrid。刚开始的时候我以为就只要设置好dataProvider=dataProvider; 就可以了呢。没有写source="{data.image1}"。导致我费了一些时间。写了dataProvider=dataProvider这句话只代表把数据放置到data中，还需要在source中设置一下。