IconFunction with ByteArray as Image Source?

Hi Guys and Gals,
How can I convert my ByteArray image string into a CLASS object that I can return in a custom iconFunction?
Here's what I have:
private function showListIcon(item:Object):Class
     var result          :Class          = new Class();
     var decoder          :Base64Decoder     = new Base64Decoder();
     if (item.hasOwnProperty("photo"))
          decoder.decode(item.photo);
     else if (item.hasOwnProperty("logo"))
          decoder.decode(item.logo);
     result = decoder.??????????; //(was using decoder.toByteArray() here in other functionality)
     return result;
Thanks!
-Mike

Hi Natasha,
Thanks for your help on this. Right now your solution is a bit over my head as I don't understand all the details. I did manage to find a solution: I created a method called imageFunction which returns either a Class object or a ByteArray, depending on what is used:
private function showListImage(item:Object):*
     var decoder     :Base64Decoder     = new Base64Decoder();
     var result     :*;
     [Embed(source="com/brassworks/assets/user.png")]
     var userIcon     :Class;
     [Embed(source="com/brassworks/assets/vendor.png")]
     var vendorIcon     :Class;
     [Embed(source="com/brassworks/assets/group.png")]
     var groupIcon     :Class;
     [Embed(source="com/brassworks/assets/role.png")]
     var roleIcon     :Class;
     [Embed(source="com/brassworks/assets/duty.png")]
     var dutyIcon     :Class;
     [Embed(source="com/brassworks/assets/location.png")]
     var locationIcon:Class;
     [Embed(source="com/brassworks/assets/resource.png")]
     var resourceIcon:Class;
        if (item.hasOwnProperty("photo"))
          if (item.photo.toString().length > 0)
               decoder.decode(item.photo);
               result = decoder.toByteArray();
          else
               result = userIcon;
     else if (item.hasOwnProperty("logo"))
          decoder.decode(item.logo);
          result = decoder.toByteArray();
     else if ((item.hasOwnProperty("name"))
          && (item.hasOwnProperty("company_id")))
          result = groupIcon;
     else if ((item.hasOwnProperty("name"))
          && (!item.hasOwnProperty("company_id")))
          result = roleIcon;
     return result;
Please let me know if there would be improvements you would make to this; I hope I'm not doing something horribly aggrevious here.

Similar Messages

Create a trigger which set Image source with binding to a dependency property.

I'm trying to create a specified button which switch images every time it pressed, without using the Click CBFunction, so I'm using toggle button and triggers (checked unchecked) and I want this button to
supply DP of string so who ever uses is button will only have to specify the images paths and a click CBFuntion to
perform what ever he wishes.
I managed to create the mechanism for switching images with triggers(but the triggers image paths are hard coded and not using DP) and to enable setting a click CBFunction. When I switch the hard coded image path with a DP which return a string with
the path the program crush, an exception is thrown.
U.C xaml:
<UserControl x:Class="ButtonChangeImage.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d">
<Grid>
<ToggleButton x:Name="btnCI">
<ToggleButton.Content >
<Image Name="img" Source="C:\Users\AmitL\Desktop\joecocker.jpg"/>
</ToggleButton.Content>
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.Target="{x:Reference img}" Storyboard.TargetProperty="Source">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="{Binding FirstImage}"/>

</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.Target="{x:Reference img}" Storyboard.TargetProperty="Source">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource="C:\Users\AmitL\Desktop\joecocker.jpg"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
</Grid>
</UserControl>
U.C cs:
public partial class UserControl1 : UserControl
public static readonly DependencyProperty FirstImageDP = DependencyProperty.Register("FirstImage", typeof(string), typeof(UserControl1), new PropertyMetadata(@"C:\Users\AmitL\Desktop\james-brown-010.jpg", new PropertyChangedCallback(FirstImageSource)));
private string m_strFirstImage = string.Empty;
private BitmapImage m_oBMImage = null;
private static void FirstImageSource(DependencyObject obj, DependencyPropertyChangedEventArgs args)
UserControl1 l_UCBtnSwitchImage = (UserControl1)obj;
l_UCBtnSwitchImage.m_strFirstImage = (string)args.NewValue;
l_UCBtnSwitchImage.m_oBMImage = new BitmapImage(new Uri(l_UCBtnSwitchImage.m_strFirstImage, UriKind.Absolute));
public string FirstImage
get
string l_strTemp = (string)GetValue(FirstImageDP);
return l_strTemp;
set
SetValue(FirstImageDP, value);
public event RoutedEventHandler Click
add { btnCI.Click += value; }
remove { btnCI.Click -= value; }
public UserControl1()
InitializeComponent();
window xaml:
<Window x:Class="ButtonChangeImage.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:m="clr-namespace:ButtonChangeImage"
Title="MainWindow" Height="350" Width="525">
<Grid>
<m:UserControl1 Click="ToggleButton_Checked" FirstImage="C:\Users\AmitL\Desktop\james-brown-010.jpg"></m:UserControl1>
</Grid>
</Window>
The exception:
A first chance exception of type 'System.Windows.Markup.XamlParseException' occurred in PresentationFramework.dll
Additional information: 'Provide value on 'System.Windows.StaticResourceExtension' threw an exception.' Line number '20' and line position '46'.
I would love to know why when I switch the hard coded value with DP it suddenly throw exception, how to fix it or if there is other way to achieve U.C with those demands.
Thanks.

Hey Magnus,
Unfortunately I get the same result, the button is switching between the (Joe Cocker) image to blue button(normal pressed button look) how come the
(Joe Cocker) image return I didn't set a trigger for unchecked so what make it change the content
or the image source back to that image?
And I can't debug (by the way what's happening there how come it doesn't stop in all those code lines?).
I didn't make any changes here is all the code:
U.C cs:
namespace ButtonChangeImage
public class ImageConverter : IValueConverter
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
string s = value as string;
var source = new System.Windows.Media.Imaging.BitmapImage();
source.BeginInit();
source.UriSource = new Uri(s, UriKind.RelativeOrAbsolute);
source.EndInit();
return source;
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
throw new NotImplementedException();
public partial class UserControl1 : UserControl
public static readonly DependencyProperty FirstImageDP = DependencyProperty.Register("FirstImage", typeof(string), typeof(UserControl1), new PropertyMetadata(@"C:\Users\AmitL\Desktop\james-brown-010.jpg", new PropertyChangedCallback(FirstImageSource)));
private string m_strFirstImage = string.Empty;
private BitmapImage m_oBMImage = null;
private static void FirstImageSource(DependencyObject obj, DependencyPropertyChangedEventArgs args)
UserControl1 l_UCBtnSwitchImage = (UserControl1)obj;
l_UCBtnSwitchImage.m_strFirstImage = (string)args.NewValue;
l_UCBtnSwitchImage.m_oBMImage = new BitmapImage(new Uri(l_UCBtnSwitchImage.m_strFirstImage, UriKind.Absolute));
public string FirstImage
get
string l_strTemp = (string)GetValue(FirstImageDP);
return l_strTemp;
set
SetValue(FirstImageDP, value);
public event RoutedEventHandler Click
add { btnCI.Click += value; }
remove { btnCI.Click -= value; }
public UserControl1()
InitializeComponent();
U.C xaml:
<UserControl x:Class="ButtonChangeImage.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d">
<Grid>
<ToggleButton x:Name="btnCI" xmlns:local="clr-namespace:ButtonChangeImage">
<ToggleButton.Resources>
<local:ImageConverter x:Key="conv" />
</ToggleButton.Resources>
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="Content">
<Setter.Value>
<Image Name="img" Source="C:\Users\AmitL\Desktop\joecocker.jpg"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content">
<Setter.Value>
<Image Source="{Binding Path=FirstImage, Converter={StaticResource conv}}"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
</Grid>
</UserControl>
Main Window cs:
namespace ButtonChangeImage
public partial class MainWindow : Window
public MainWindow()
InitializeComponent();
private void ToggleButton_Checked(object sender, RoutedEventArgs e)
MessageBox.Show("f");
Main Window xaml:
<Window x:Class="ButtonChangeImage.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:m="clr-namespace:ButtonChangeImage"
Title="MainWindow" Height="350" Width="525">
<Grid>
<m:UserControl1 Click="ToggleButton_Checked" FirstImage="C:\Users\AmitL\Desktop\james-brown-010.jpg"></m:UserControl1>
</Grid>
</Window>
Thanks,
Amit.

Trying to load byteArray into image

Hi i have loaded an image with an byteArray from a filereference instance, somthing like:
myImage.source = myFileReference.data;
this works great, so i know Images.source can be set to a byteArray.
When i'm converting a bitmapdata to bytearray ,and load it into an image i get an error. This is my code:
myImage.source = myBitmap.bitmapData.getPixels(myBitmap.bitmapData.rect);
I get:
Error #2044: Unhandled IOErrorEvent:. text=Error #2124: Loaded file is an unknown type.
Any ideas why this doesn't work?
thanks.

Because that bytearray only contains bitmapdata and not a full image file with, say, a JPG header or GIF header. If all you have is a bitmap data's byteArray, simply create another bitmap from it and pass that to myImage.source
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui

Problem with displaying BLOB images on JSP page using a servlet

hi. I have a big problem with displaying BLOB images using JSP. I have a servlet that connects to the oracle database, gets a BLOB image , reads it, and then displays it using a BinaryStream. The problem is , this works only when i directly call that servlet, that is http://localhost:8080/ImageServlet. It doesn't work when i try to use that servlet to display my image on my JSP page (my JSP page displays only a broken-image icon ) I tried several coding approaches with my servlet (used both Blob and BLOB objects), and they work just fine as long as i display images explicitly using only the servlet.
Here's what i use : ORACLE 10g XE , Eclipse 3.1.2, Tomcat 5.5.16 , JDK 1.5
here is one of my image servlet's working versions (the essential part of it) :
               BLOB blob=null;
          rset=st.executeQuery("SELECT * FROM IMAGES WHERE ID=1");
          while (rset.next())
               blob=((OracleResultSet)rset).getBLOB(2);
          response.reset();
          response.setContentType("image/jpeg");
          response.addHeader("Content-Disposition","filename=42.jpeg");
                ServletOutputStream ostr=response.getOutputStream();
               InputStream istr=blob.getBinaryStream(1L);
                int size=blob.getBufferSize();
          int len=-1;
                byte[] buff = new byte[size];
                     while ((len=istr.read( buff ))!=-1 ) {
               ostr.write(buff,0,len);
         response.flushBuffer();
         ostr.close(); and my JSP page code :
<img src="/ImageServlet" border="0" > If you could just tell me what i'm doing wrong here , or if you could show me your own solutions to that problem , i would be very greatful ,cos i'm realy stuck here , and i'm rather pressed for time too. Hope someone can help.

I turns out that it wasn't that big of a problem after all. All i had to do was to take the above code and place it into another JSP page instead of into a servlet like i did before. Then i just used that page as a source for my IMG tag in my first JSP. It works perfectly well. Why this doesn't work for servlets i still don't know, but it's not a problem form me anymore . Ofcourse if someone knows the answer , go ahead and write. I would still appriceatte it.
here's the magic tag : <img src="ImageJSP.jsp" border="0" > enjoy : )

System Image Utility - Issues with making bootable images

During the image creation process for a Netboot, the System Image Utility reports an error. I've included the log file (everything before the removal of the bad image below).
------------Begin Log File --------------
2006-06-02 13:19:25 -0400 Initiating user authentication
2006-06-02 13:19:28 -0400 Image creation in progress
2006-06-02 13:19:28 -0400 Starting image creation
newfs_hfs:
2006-06-02 14:10:30 -0400 b=400: bitmap clump size is too small
--------------End Log File--------------------
I have no issue creating images from restore disk sets (that shipped with machines) or retail masters of various OS's. This issue seems to be related to the particular drives I am trying to create images from.
The drives that give me this error are hardwarily OK and the software works great. I can boot from these drives and have no issues with the machines imaged from them after the fact. I just want to Netboot off of these so I don't have to lug a million drives around...
Any clue?

i know that was the case in Leopard and Snow Leopard but i just mounted a leopard image to create a new netrestore on my lion server. i was not able to boot any of my images created on Leopard or SL when running Lion Server. I assume i need to recreate the images on Lion. Right now my Lion server is using a leopard image as the source to create a netrestore i can push on the Lion server.

How to set image source path in formsweb.cfg file in forms 11g

Hi,
I had written HTML code in the formsweb.cfg file in forms 11g. In the below code i am unable to retrive image file(i.e., .gif, .jpeg) from the server or local machine.
In the below HTML code i set image source in the image tag as below:
<img src="E:\Oracle\Middleware\Oracle_FRHome1\tools\web\html\agilis-life-new11_04.GIF"
Is this correct path to fetch the images from the server or local machine .
Please help me out how to set path for image in html or is there any alternate process to retrive images.
Here is the code :
[INDIVIDUALUAT]
workingDirectory=D:\Aims10dev\Work
form=LMstartup.fmx
userid=rmenu/rmenu@RLIFEQA64
codebase=/forms/java
imageBase=codebase
width=1005
height=750
WebUtilArchive=/forms/java/frmwebutil.jar,/forms/webutil/jacob.jar
WebUtilLogging=off
WebUtilLoggingDetail=normal
WebUtilErrorMode=Alert
WebUtilDispatchMonitorInterval=5
WebUtilTrustInternal=true
WebUtilMaxTransferSize=16384
baseHTMLjinitiator=webutiljini.htm
baseHTMLjpi=webutiljpi.htm
archive_jini=frmall_jinit.jar,life-icons-round.jar,Agilis_Icon.jar,life_Icon.jar,personalize.jar,hyperlink.jar,amazingbutton.jar
archive=frmall.jar
separateFrame=False
lookandfeel=Generic
EndUserMonitoringURL=True
usesdi=yes
#HTMLbeforeForm= <table width="1005" border="0" cellspacing="0" cellpadding="0"><tr><td width="200"><img src="/forms/html/agilis-life-logo.gif" width="200" height="80" /></td><td width="10"><img src="/forms/html/agilis-life-new11_02.gif" width="36" height="80" /></td><td width="805" valign="top" background="/forms/html/agilis-life-new11_03.gif"></td></tr></td></tr></table>
HTMLbeforeForm=<body topmargin="0" leftmargin="0" > <table width="1005" height="100" border="0" cellspacing="0" cellpadding="0"><tr><td width="200" valign="bottom" ><img src="E:\Oracle\Middleware\Oracle_FRHome1\tools\web\html\agilis-life-logo.gif" width="200" height="80" /></td><td width="10" valign="bottom" ><img src="E:\Oracle\Middleware\Oracle_FRHome1\tools\web\html\agilis-life-new11_02.gif" width="36" height="80" /></td><td width="550" valign="bottom" ><img src="E:\Oracle\Middleware\Oracle_FRHome1\tools\web\html\agilis-life-new11_03.gif" width="550" height="80" /></td><td valign="bottom"><table width="219" height="90" border="0" cellspacing="0" cellpadding="0"><tr><td height="36" valign="bottom" align="center"><img src="E:\Oracle\Middleware\Oracle_FRHome1\tools\web\html\agile-logo.jpg" height="36"></td></tr><tr><td height="10" valign="bottom"> <div align="right"><span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; text-decoration:none; color:#00000; " >Home | Change Password | Logout</span></div></td></tr><tr><td colspan="3" valign="bottom"><img src="E:\Oracle\Middleware\Oracle_FRHome1\tools\web\html\agilis-life-new11_04.GIF" width="100%" height="39" /></td></tr></table></td></tr></td></tr></table></body>

AFAIK, this is not the correct way to set the image location.
We call the working directory as context, so inside the context root along with WEB-INF, maintain a folder with name img and put all the images in that directory.
You can use either .\<image_folder> or the optimum way would be (if you are using JSPs) to use getContext() method and traverse accordingly.
FYI,,, using getContext() will give you context root directory, from there it is as simple as accessing any other folder.
Hope this answers your question.
Cheers,
Jeets.

Have to toggle "Relative to" button each time I try to change an image source

Dreamweaver CS4 running on Windows 7.
When changing an existing image on an existing web page in Dreamweaver by double-clicking the existing image on the page to open the Select Image Source panel, I have to toggle the "Relative to" (Site Root / Document) button for each image.
In other words, say that when using Design view, I want to replace img1.jpg with img3.jpg, and IMG2.jpg with img4.jpg, The steps I have to take are:
1. Double click img1.jpg on the page to open the Select Image Source panel.
2. Select img3.jpg.
3. Click the Relative to button at the bottom of the panel and change it from whichever it is on (Site Root, let's say) to the other option (Document).
4, Then click OK.
5. Double click img2.jpg on the page...
6. Select img4.jpg
7 Select the other option (SIte Root) in the Relative to drop down
8. Then click OK
9. Repeat for each image whose source is being changed. If one is relative to Site Root, the next will have to be relative to Document, then the next again I have to select Site Root, etc.
If I don't select the other relative to option, the image source path will not change when I click OK.
Default Link Relative To in site definition is set to Document.
It's been like this for weeks now and it's starting to get annoying. Any ideas?

David, I tried deleting the corrupt cache flie, no difference. Deleted the config folder, same. Other than I lost the extensions... and had to reinstall them.
However, John's answer is correct. And clicking another image before clicking the one I want is faster than the way I was doing it.
It makes no difference if they are .png .jpg or .gif images.
By the way, I was wrong about my DW version. Turns out it's CS3. Guess it's time to upgrade... one of thes days!
Thanks everyone!
Message was edited by: tarfh, to add sentence about png images.

Use different "fx-border-image-source" for first tab and remaining tabs

Hi,
I'm using something like this
.tab {
-fx-padding: 0px 5px -2px 5px;
-fx-background-insets: 0 -20 0 0;
-fx-background-color: transparent;
-fx-text-fill: #c4d8de;
-fx-border-image-source: url("images/tab5.png");
-fx-border-image-slice: 20 20 20 20 fill;
-fx-border-image-width: 20 20 20 20;
-fx-border-image-repeat: stretch;
-fx-font-size: 22px;
.tab:selected {
-fx-border-image-source: url("images/tab-selected5.png");
-fx-text-fill: #333333;
     -fx-background-color: red;*/
to customize the tab appearance of a TabPane.
That worked well. But I need to use a different set of images for just the first tab. Does anyone know a way to accomplish that?
Thanks.

How can I "fix up" the first tab of tab panes that are created after I "fixed up" the first tab of the initial tab pane?
My app allows user to create new tab panes at any moment during program execution.Not easy to answer this one.
The best answer would be to use structural pseudoclasses, but (as David points out), they are not yet implemented.
The trick here is how to identify the first tab of each tab pane so that it can be styled separately from the other panes.
Doing the styling without a dynamic lookup is preferrable to using a dynamic lookup (i.e. when the first tab is created give it a specific style, e.g. tab0).
This is how the charts work, where they set style classes based on series of data, e.g. series0, series1 - this allows you to independently style each series of data.
However the chart stuff has all of that built into the implementation, whereas the tabs don't. To achieve that you would likely need to go into the TabSkin code (http://openjdk.java.net/projects/openjfx/) find out where and how it generates the Tab nodes and write a custom tab skin or extension of the existing one which assigns a numeric style class to each new tab in a pane (e.g tab0, tab1, etc). In other words, not particularly easy if you are unfamilar with the tab skin implementation. You could log a javafx jira feature request to have those style classes set on tabs - file it here => http://javafx-jira.kenai.com.
In the meantime a simple alternative is to use the dynamic lookup method in my previous post and a hack such that whenever you add a new tab pane to the scene you do something like the following:
new Timeline(
new KeyFrame(
    Duration.millis(50),
    new EventHandler<ActionEvent>() {
      @Override public void handle(ActionEvent arg0) {
        Node tab = newTabPane.lookup(".tab");
        if (tab != null) tab.getStyleClass().add("first-tab");
).play();The reason for the Timeline is that I don't really know at what stage the css layout pass is executed. I know that when you initially show the stage and then do a lookup, the css pass seems to have already been done and the lookup will work. But for something that is dynamically added or modified after the scene is displayed - I have no idea when the css layout pass occurs, other than it's some time in the future and not at the time that you add the tabPane to the scene. So, the Timeline introduces a short delay to (hopefully) give the css layout pass time to execute and allow the lookup to work (not return null). Not the best or most efficient solution, but should work for you.

Image.source in ItemRenderer works in Windows but not Mac

I have a Flex (AIR) application that is giving me problems on
the Mac. In one of the
Datagrids, I am using an ItemRenderer with an image control.
Some code in the
"set data(value:Object)" function assigns a file path as the
source of the image
control as follows.
imgThumb.source =
File.documentsDirectory.resolvePath("pdqtemp").nativePath +
"/" + data.strJPGFileName;
This works correctly in Windows , but not on the Mac.
In this case, the path resolves to the following on the Mac.
/Users/brian/Documents/pdqtemp/artist_01t.jpg
I have verified that the file is in the right place and when
using the path in
the command line console, it correctly addresses that
directory and file. I
don't normally develop apps for the Mac so I am sure there is
something I am
missing.
Any ideas?
Thanks for your help.

Hi Jed,
Thanks for responding
That is the exact path assigned to the Source of the Image
control. However, it isn't exactly a trace of the Image.Source
property.
The code in question is attached
The alert shows the path I originally posted and shows that
the fileImgThumb.exists returns False.
As I mentioned, this works perfectly in Windows. There is
some code elsewhere in the app that creates the thumbnail. That
does work on the Mac as the thumbnail image is created and saved
where expected.
I am not sure what I might be doing wrong.
Thanks for your help,
Sid

Strange behavior with Zoom and Image control

HELP - I have a strange behavior (bug?) with using Zoom
effect on an Image that has been placed on a Canvas. I am using
dynamically instantiated images which are placed on a canvas inside
a panel. I then assign a Zoom IN and Zoom Out behavior to the
image, triggered by ROLL_OVER and ROLL_OUT effect triggers. THE BUG
is that the image jumps around on the Zoom OUT and lands on a
random place on the canvas instead of coming back to the original
spot. This is especially true if the mouse goes in and out of the
image very quickly. HELP -- what am I doing wrong? Computer = Mac
OS X 10.4.9 Flex 2.0.1
Here's a simple demo of the bug -- be sure to move the mouse
in and out rapidly:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="setUp();">
<mx:Script><![CDATA[
import mx.events.EffectEvent;
import mx.effects.Fade;
import mx.effects.Zoom;
import mx.rpc.events.ResultEvent;
import flash.display.Sprite;
import mx.core.UIComponent;
import mx.controls.Image;
private var zoomIn:Zoom;
private var zoomOut:Zoom;
private function setUp():void {
var image:Image = new Image();
image.id = "album_1_1";
image.x = 200;
image.y = 200;
image.width = 64;
image.height = 64;
image.source = "
http://s3.amazonaws.com/davidmccallie/album-128.jpg";
image.addEventListener(MouseEvent.ROLL_OVER, doZoom);
image.addEventListener(MouseEvent.ROLL_OUT, doZoom);
myCanvas.addChild(image);
zoomIn = new Zoom();
zoomIn.zoomHeightTo = 2.0;
zoomIn.zoomWidthTo = 2.0;
zoomIn.captureRollEvents = true;
zoomIn.suspendBackgroundProcessing = true;
zoomOut = new Zoom();
zoomOut.zoomHeightTo = 1.0;
zoomOut.zoomWidthTo = 1.0;
zoomOut.captureRollEvents = true;
zoomOut.suspendBackgroundProcessing = true;
private function doZoom(event:MouseEvent):void {
var image:Image = Image(event.currentTarget);
if (event.type == MouseEvent.ROLL_OVER) {
zoomIn.target = event.currentTarget;
zoomIn.play();
} else if (event.type == MouseEvent.ROLL_OUT) {
zoomOut.target = event.currentTarget;
zoomOut.play();
]]>
</mx:Script>
<mx:Panel width="100%" height="100%"
layout="absolute">
<mx:Canvas id="myCanvas" width="100%" height="100%">
</mx:Canvas>
</mx:Panel>
</mx:Application>

There must be bugs in the Zoom effect code -- I changed the
Zoom to Resize in the above code, and it works perfectly. Of
course, Resize is not as nice as Zoom because you can't set the
resize to be around the center of the image, but at least it works.
Does anyone know about bugs in the Zoom effect?

Strange behavior with embedded highDPI images in Apple Mail 7.0

I came across an issue where images get displayed in there native size even with width attribute:
Here's my test html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
    <div>
        <p>Embeded 1</p>
        <img src="embeded400x200.png" width="200" height="100" />
        <img src="embeded400x200.png" width="200" height="100" />
        <img src="embeded200x100.png" width="200" height="100" />
        <img src="embeded200x100.png" width="200" height="100" />
    </div>
    <div>
        <p>Embeded 2</p>
        <img src="embeded400x200.png" width="200" height="100" />
        <img src="embeded400x200.png" width="200" height="100" />
        <img src="embeded200x100.png" width="200" height="100" />
        <img src="embeded200x100.png" width="200" height="100" />
    </div>
    <div>
        <p>Linked 1</p>
        <img src="http://dummyimage.com/200x100/000/fff&text=linked+200/100" width="200" height="100" />
        <img src="http://dummyimage.com/400x200/000/fff&text=linked+400/200" width="200" height="100" />
        <img src="http://dummyimage.com/200x100/000/fff&text=linked+200/100" width="200" height="100" />
        <img src="http://dummyimage.com/400x200/000/fff&text=linked+400/200" width="200" height="100" />
    <div>
    <div>
        <p>Linked 2</p>
        <img src="http://dummyimage.com/200x100/000/fff&text=linked+200/100" width="200" height="100" />
        <img src="http://dummyimage.com/400x200/000/fff&text=linked+400/200" width="200" height="100" />
        <img src="http://dummyimage.com/200x100/000/fff&text=linked+200/100" width="200" height="100" />
        <img src="http://dummyimage.com/400x200/000/fff&text=linked+400/200" width="200" height="100" />
    <div>
</body>
</html>
Here's a screenshot from Apple Mail 7.0
The images get embeded with phpMailer so the source may looks slightly different but the width attributes will remain.
Only the first embedded image is affected
I did a testrun with Litmus and all other mails works as expected. Even Apple Mail 5 and Apple Mail 6
Is this a bug in Apple Mail or do I miss something?

I wonder if this is the same problem that I encounter:
I receive faxes in my inbox as tiff files and before Mavericks I could view them properly in-line .. but now only the first one I go to displays correctly .. all other received faxes show this same image.
If I "open" the attachment it is properly displayed .. but in-line it is always the same image that displays .. the first one that I go to when opening Mail.
As far as I can see it is only tiffs sent by my fax-to-email service that show up improperly .. other in-line attachments such as PDF's seem unaffected and display correctly.
I thought that it was related to the coverflow issue that was fixed by the 10.9.1 update .. but no such luck.

Change image source distorts new image

Is there any easy way, once I change image source in Edge Animate, to get it to at least be proportionally correct? When I change an image source with a different size, it comes in distorted.

If you change the source it will fill the boundaries of the original source image automatically. If the size is different, it is probably better to delete the original image and drop the new one.
If you are talking about loading an image dynamically and changing them dynamically, use css background image with no-repeat and have you div be the size of the largest image used unless you code the image size when they change.

Conditional image and image source in SSRS

I have images stored in database for some of the items but not for the others. If there is no image in the database I would like to display static placeholder image embedded in the report.
Is there a way to achieve that? The problem I experience is that there is no way to specify expression for Image Source. I tried to use expressions for Value field (when Image Source is set to Database) to specify the name for embedded image depending on
condition but nothing I tried worked.

If your image is embedded in a tablix then, yes, you are sourced to a single dataset. However the Lookup function pulls in "related" data from another dataset. Related is in quotes because there are ways to fool it. The syntax is:
=Lookup(index_current_dataset, index_other_dataset,field_to_get_from_other_dataset, other_dataset_name)
If you have a second dataset, "Second", that returns a single column, "Picture", that is your default image, you can retrieve that image using lookupset as follows:
=Lookup(1,1,Fields!Picture.Value,"Second")
the 1,1 is used to fool the lookup expression. Since 1 will always match 1, it will return everything in the dataset, which is the single image. Throw that into a logical check (IIf) and you get:
=IIf(IsNothing(Fields!RelatedImage.Value), Lookup(1,1,Fields!Picture.Value,"Second"), Fields!RelatedImage.Value)
That said Andre's approach should work also. the example may be for embedded but the principle should work for db as well since you can set a formula for visibility. Yours is in a tablix so it will require some tweaks.
In the cell where the image will be embedded, first add a rectangle. The rectangle will allow you to add 2 images to the cell. Add your default image and set its source to whatever you like. It can even be an embedded image. Now add a second image and set
it to your database image field. In the visibility property of each image set it show or hide based on an expression:
default image expression: =IIf(IsNothing(Fields!Image.Value),false,true)
db image expression: =IIf(IsNothing(Fields!Image.Value),true,false)
You will want to set the cell width/height so it is equal or smaller than 1 image in design view. A table cell can grow bigger at runtime to accommodate more content but not smaller. Because of this, you need to set the design-time cell height and width
equal or smaller than a single image.
The advantage of this approach is that the default image does not need to come from a dataset like with my suggestion.
"You will find a fortune, though it will not be the one you seek." -
Blind Seer, O Brother Where Art Thou
Please Mark posts as answers or helpful so that others may find the fortune they seek.

Af:image source outside of application

Hi I use Jdev 12c
I have a folder which contains images, this folder is outside the app
I did this to save space in the Database,
I'd like to know how to access it to show it
I used
<af:image source="/home/diego/Pictures/aaa.png" id="i1" shortDesc="Hi"/>
but it didn't work I checked the generated code and it shows like this:
<img id="r1:2:i1" title="Hi" alt="Hi" class="xkx" src="/test/home/diego/Pictures/aaa.png">

Having a folder which contains images makes the folder within the app, not outside as indicated. Having images in a database would make the images outside the app.
What is the images folder placement?
"Only image data deployed with the application below the web root (not within the WEB-INF folder) is directly accessible."
JDev11.1.2.1.0: Handling images/files in ADF (Part 3) | JDev &amp; ADF Goodies

Hello Experts, i have issue with mime repository image with different languages ?

Good day !
I was facing the issue with images : we are creating the images by using CSS tool to generate a button. that image type is .png , this images we are importing into webdyunpro component as a mime object.
These images are binided into button image source property. And i am writing the code for calling this button (this is uniq code for all languages).
But all langaues are working fine for spanish(ES) langage only it was not displaying the image. it is displyind cross mark.
Naming standard i ma mainintg for mime object name : Export_ES.png.(spanish).
Please can any one help me on this .
Regards,
Venu

Hi Kiran,
Thanks for your Promt reply.
1. i am creating different images for different languages.
ex : english : Export_EN.png
         Spanish : Export_ES.png
Code will be : here i am creating attribute and bing that attribute to button image source.
me ->get_button_img
    EXPORTING
      im_button_id    = 'Export'
      im_button_value = 'IMG_EXPORT'
      im_type         = '.png'
    CHANGING
      ch_context_ele = lo_el_images.
'IMG_EXPORT' : attribute name
method : get_button_img
   DATA: lv_img_name TYPE string,
        lv_lang     TYPE string.
*        lv_jpg(4)   TYPE c VALUE '.jpg'.
lv_lang = sy-langu .
CALL FUNCTION 'CONVERSION_EXIT_ISOLA_OUTPUT'
    EXPORTING
      input = lv_lang
    IMPORTING
      output = lv_lang.
CONCATENATE im_button_id '_' lv_lang IM_TYPE INTO lv_img_name.
CALL METHOD CH_CONTEXT_ELE->set_attribute
    EXPORTING
      value = lv_img_name
      name = im_button_value.
here lv_img_name : Export_ES.png.
But its not working.
thank you

IconFunction with ByteArray as Image Source?

Similar Messages

Maybe you are looking for