无法访问htmlText中的嵌入图像

Question

图像可以TextArea使用htmlText属性包含在控件中:

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

如何参考嵌入图像？

一个例子:

<mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml">
    <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 />

适用于本地计算机,但在服务器环境中它会抛出:

Error #2044: Unhandled IOErrorEvent:. text=Error #2035: URL Not Found.

我怎样才能解决这个问题？

Answer 1

好吧,我刚刚花了几个小时来解决这个问题,但我已经在Flash和Flex中使用了它.

在TextField中显示图像

您可以将DisplayObjects加载到TextField <img />标记中,包括MovieClips,Sprite和嵌入图像.

• 在Flash或Flex中,如果要显示嵌入的图像,则必须创建一个扩展DisplayObject类的包装类(例如Sprite或MovieClip).

• 确保您的文本字段足够大以包含图像.在测试期间,当我真的让TextField太小而无法显示整个图像时,我认为事情不起作用.

Flash示例

简单的例子,所有代码都在主时间轴上.

1. 在舞台上创建动态TextField.给它一个有用的名字,我叫我的txtImageTest.

2. 调整txtImageTest到合适的大小,例如300x150px.

3. 创建一个新的MovieClip符号并为其指定一个类名,例如imageClip1.

4. 在新剪辑中绘制内容或在其中放置嵌入图像imageClip1.

5. 返回主时间轴,取消选择所有对象并在第一帧上打开Actionscript编辑器.

6. 在文本字段上启用多行和自动换行:

   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. 保存并测试您的电影.

Flex示例

既然我们不能只在库中创建一个新的MovieClip像我们在Flash做,我们需要建立一个执行相同任务的新类(此方法也适用在Flash中,如果你想要在库中创建一个新的剪辑) .

这是我的黑色三角形子弹类,名为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);
        }

    }
}

注意:千万不能扩展位图(闪存)或了BitmapAsset(Flex中),因为它们不会在文本字段比例或位置正确.选择精灵或类似的东西.

以下是在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>

请注意,我src在image标签的属性中使用了完全限定的类名.

最后的笔记

• 图像对齐到文本字段的左侧或右侧,由align图像标记的属性确定.这意味着您无法在不直接访问图像的情况下将图像放置在文本中间.

• 图像标记支持的属性列表如下:http:
  //blog.coursevector.com/notes-htmltext

• TextField LiveDoc页面位于:http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/TextField.html
  

• 该getImageReference()功能是你需要得到一个参考图像的文本框的内容:
  http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/TextField.html#getImageReference%28%29

• 确保在src属性中使用完全限定的类名.

• 确保声明包装类的变量以确保将其编译到SWF中.