无法访问 htmlText 中的嵌入图像

Question

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

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 标记中，包括 MovieClip、Sprite 和嵌入图像。

• 在 Flash 或 Flex 中，如果您想显示嵌入图像，则必须创建一个扩展 DisplayObject 类（例如 Sprite 或 MovieClip）的包装类。

• 确保您的文本字段足够大以包含图像。 在测试过程中，当我的 TextField 确实太小而无法显示整个图像时，我认为事情不起作用。

---

Flash 示例

简单的示例，所有代码都在主时间轴上。

1. 在舞台上创建一个动态文本字段。 给它一个有用的名称，我称之为 txtImageTest。

2. 将txtImageTest调整为合适的尺寸，例如300x150px。

3. 创建一个新的 MovieClip 元件并为其指定一个类名称，例如 imageClip1。

   创建

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

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

   返回主时间线，取消

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

   imageClip1.wordWrap = true; 
     imageClip1.multiline = true; 
     imageClip1.htmlText = "
   您可以使用 <img> 标记在 HTML 文本中包含图像。
   这是图像后面的文本，我通过延长这句话来扩展文本。足够长以显示图像底部的环绕。
   ” 
     

7. 保存并测试您的电影。

---

Flex 示例

由于我们不能像在 Flash 中那样在库中创建新的 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);
        }

    }
}

注意：不要不要扩展 Bitmap（在 Flash 中）或 BitmapAsset（在 Flex 中），因为它们无法缩放或在文本字段中正确定位。 选择 Sprite 或类似的东西。

下面是在 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 <img> 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 属性中使用完全限定的类名。

---

最后注释

• 图像与文本字段的左侧或右侧对齐，具体取决于图像标记的 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 中。

Answer 2

您可以将嵌入图像指定为 htmlText 中 HTML img 标记的 src，方法是使用完全限定类名（您可以使用 getFullyQualifiedClassName 确定该类名）来引用它们。 就像这样：

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

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

这比为可能嵌入的每个图像创建包装类要简单得多......

Answer 3

尝试：

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

请参阅文档。

Answer 4

我一直在寻找同样的东西。 使用嵌入图像背后的想法是防止从外部 URL 加载所述图像。 所以接受的答案实际上并没有解决问题。 我看过文档，他们也在那里使用 URL，并且该图像不会被编译到 swf 中，但会在运行时从服务器加载。 为什么他们称该嵌入图像可能是因为它嵌入在文本中，但我正在寻找的是使用嵌入在编译代码中的图像。

为什么要在 htmlText 中使用嵌入图像显示？ 因为这是在工具提示中显示图像的最简单方法（您只需重写默认工具提示类以设置 htmlText 而不是文本，并将其设置为 TooltipManager 中的默认工具提示类）。 在我的搜索中，我发现了这个：http://groups .google.com/group/flex_india/browse_thread/thread/cf0aa62afaae3fdc/b21f462f8d5da117?pli=1 。 还没有测试过，我猜问题在于确定链接 id。 当我得到更多细节时，我会回来提供更多细节。

Answer 5

Sly_cardinal 写了一个非常有用的答案。 非常感谢他！
这个问题我折腾了半天也没能解决。 Sly_cardinal 注意到，如果这样做，getQualifiedClassName（嵌入位图）图像将不会正确地插入到文本中的左上角。
Sly_cardinal 提出制作一个包装类。

我想附加一个他的答案

一个新的类包装器
ImageWrapper.as->

package 
{
import flash.display.Bitmap;
import flash.display.Sprite;
public class ImageWrapper extends Sprite{
    public static var img:Class;
    public function ImageWrapper() {
        var bitmap:Bitmap = new img();
        addChild(bitmap);
    }
}
}

代码中的调用：

[Embed(source = "img/MyImg.png")] var _MyImg:Class;
ImageWrapper.img = _MyImg;
tf.htmlText = "My text, and my image <img src='ImageWrapper'>";

就是这样。
谢谢你！

Answer 6

尝试

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

取自：使用 htmlText 属性

Answer 7

使用 src='assets/img.gif'，但您必须在部署应用程序 SWF 的服务器目录中创建一个 asset 目录，并将 img.gif 文件放在那里。 当在 html 中时，它会查找与 SWF 文件相关的文件。

这将允许您在开发和部署位置使用相同的文件和位置。

Answer 8

它可以在本地主机上运行，​​因为您的计算机上有图像，因此您可以加载它。 如果要嵌入它，它不会上传到服务器上的指定目录中，而是包含在 .SWF 文件本身中。 将图像上传到生产输出中的相应位置（浏览图像以从源文件文件夹上传）。

Answer 9

不用再麻烦自己了！从现在起，导入MovieClips不再是一件大事了！ 借助名为 TextArea 的新类（不是 TextArea 组件，它是一个 OOP 类，是原始 TextField 类的扩展）。

我们不再需要嵌入或库，我们可以在任何地方使用 TextArea 而不是 Textfield，这使我们能够导入我们自己的 SWF 文件，例如视频播放器、会说话的头像或其他任何内容我们的文本行。

它还有更多功能，并且不具体限于此问题。
查看 www.doitflash.com 了解更多信息，该网站提供该平台，下载也是免费的收费:)