Flex. Embeded images in htmlText

Question

Images can be included in TextArea control using htmlText property:

ta.htmlText = '<img src="http://..."/&gt;';

How can i reference embeded images?

An example:

<mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml"&gt;
    <mx:Script>
        <![CDATA[
            [Embed(source='../assets/img.gif')]
            public var img:Class;
        ]]>
    </mx:Script>
    <mx:htmlText>
        <![CDATA[
            <img src="???" />
        ]]>
    </mx:htmlText>
</mx:TextArea>

UPD:

<img src='../assets/img.gif />

works on local machine, but in server environment it throws: "Error #2044: Unhandled IOErrorEvent:. text=Error #2035: URL Not Found." How to fix it?

Answer 1

<mx:Image source="{img}"/>

oops ignore

Answer 2

Try

src='../assets/img.gif'

Taken from: Using the htmlText property

Answer 3

Try:

<mx:htmlText>
        <![CDATA[
           <p>
            <img src='../assets/butterfly.gif' 
                 width='30' height='30' 
                 align='left' 
                 hspace='10' vspace='10'>
            </p>
        ]]>
     </mx:htmlText>

See documentation.

Answer 4

There's no way to do this?

Answer 5

Use src='assets/img.gif' but you will have to create an assets directory in the directory of the server where the application SWF is deployed and place your img.gif file there. When in html, it is looking for the file relative to the SWF file.

This will allow you to use the same file and location in both development and deployed locations.

Answer 6

It works on localhost because you have the image on the machine, so you can load it. If you are embedding it, it is not uploaded on the server in the specified directory, rather it is contained by the .SWF file itself. Upload the image (browse it for upload from you source files folder) in the corresponding place in the production output.

Answer 7

OK, I've just spent a couple of hours sorting this out, but I've got it working in Flash and Flex.

Displaying images in a TextField

You can load DisplayObjects into TextField <img /> tags including MovieClips, Sprites and embedded images.

• In Flash or Flex if you want to display an embedded image then you will have to create a wrapper class that extends a DisplayObject class (e.g. Sprite or MovieClip).

• Make sure your text field is large enough to contain the image. During testing I thought things weren't working when I really had the TextField too small to display the whole image.

---

Flash Example

Simple example, all code is on the main timeline.

1. Create a dynamic TextField on the stage. Give it a useful name, I'm calling mine txtImageTest.

2. Resize txtImageTest to a decent size, e.g. 300x150px.

3. Create a new MovieClip symbol and give it a class name, e.g. imageClip1.

4. Draw something in your new clip or place an embedded image inside imageClip1.

5. Go back to the main timeline, deselect all objects and open the Actionscript editor on the first frame.

6. Turn on multiline and word-wrapping on the text field:

   imageClip1.wordWrap = true;
   imageClip1.multiline = true;
   imageClip1.htmlText = "<p>You can include an image in your HTML text with the &lt;img&gt; tag.</p><p><img id='testImage' src='imageClip1' align='left' width='30' height='30' hspace='10' vspace='10'/>Here is text that follows the image. I'm extending the text by lengthening this sentence until it's long enough to show wrapping around the bottom of the image.</p>"
   

7. Save and test your movie.

---

Flex Example

Since we can't just create a new MovieClip in the library like we did in Flash we need to create a new class that performs the same task (this method also works in Flash if you want want to create a new clip in the library).

Here is my class for a black triangle bullet, called BlackArrow.as:

// Set the correct package for you class here.
package embed
{
    import flash.display.Sprite;
    import mx.core.BitmapAsset;

    public class BlackArrow extends Sprite
    {
        // Embed the image you want to display here.
        [Embed(source='assets/embed/triangleIcon_black.png')]
        [Bindable]
        private var TriangleImage:Class;

        public function BlackArrow()
        {
            super();

            // Instantiate the embedded image and add it to your display list.
            var image:BitmapAsset = new TriangleImage();
            addChild(image);
        }

    }
}

NOTE: Do not extend Bitmap (in Flash) or BitmapAsset (in Flex) as they do not scale or position properly in the TextField. Choose Sprite or something similar.

Here is an example of a class that displays this image in the TextField:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
    width="100%" height="100%">

    <mx:Script>
    <![CDATA[
        import embed.BlackArrow;

        // You must include a variable declaration of the same type as your
        // wrapper class, otherwise the class won't be compiled into
        // the SWF and you will get an IOError.
        private var img2:BlackArrow;
    ]]>
    </mx:Script>

    <mx:Text id="txtResults1" width="100%" height="100%">
        <mx:htmlText>
        <![CDATA[<p>You can include an image in your HTML text with the &lt;img&gt; tag.</p><p><img id='testImage' src='embed.BlackArrow' align='left' hspace='10' vspace='10'/>Here is text that follows the image. I'm extending the text by lengthening this sentence until it's long enough to show wrapping around the bottom of the image.</p>]]>
        </mx:htmlText>
    </mx:Text>

 </mx:VBox>

Note that I am using the fully-qualified class name in the src attribute of the image tag.

---

Final Notes

• Images are aligned to the left or right of a text field as determined by the align attribute of the image tag. This means that you cannot position an image in the middle of text without accessing the image directly.

• A list of the attributes supported by the image tag is here:
  http://blog.coursevector.com/notes-htmltext

• The TextField LiveDoc page is here:
  http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/TextField.html

• The getImageReference() function is what you need to get a reference the images in the textfield:
  http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/TextField.html#getImageReference%28%29

• Make sure you use fully-qualified class names in the src attribute.

• Make sure you declare a variable of your wrapper class to ensure it is compiled into the SWF.

Answer 8

I was looking for the same thing. The idea behind using embedded images is to prevent loading of said images from an external URL. So the accepted answer actually isn't solving the problem. I've seen the documentation, and they too use an URL there, and that image will not be compiled into the swf, but will be loaded at runtime from the server. Why they call that embedded image is probably because it's embedded withing the text, but what I'm looking for is to use an image that is embedded in the compiled code.

Why would you want an embedded image show used in a htmlText? Because it's the easiest way to display an image in a tooltip (you just need to override to default tooltip class to set the htmlText instead of text, and set it as the default tooltip class in the TooltipManager). In my search I discovered this: http://groups.google.com/group/flex_india/browse_thread/thread/cf0aa62afaae3fdc/b21f462f8d5da117?pli=1 . Haven't test it yet, and I guess the problem will come in determining that linkage id. I'll come back with more details when I have them.

Answer 9

You can specify embedded images as the src for HTML img tags in htmlText by referencing them using their fully qualified class name, which you can determine using getFullyQualifiedClassName). Like so:

public class Example
{
    [Embed(source="myImage.png")
    public static const MyImage:Class;

    public function getHTMLImg() : String
    {
        return "<img src='" + getQualifiedClassName(MyImage) + "' />";
    }
}

That's much simpler than creating a wrapper class for every image which might be embedded...