无法访问 htmlText 中的嵌入图像答案

【问题标题】：Unable to access embedded images in htmlText无法访问 htmlText 中的嵌入图像
【发布时间】：2023-03-23 16:34:01
【问题描述】：

可以使用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 />

在本地机器上工作，但在服务器环境中它会抛出：

错误 #2044：未处理的 IOErrorEvent：。文本=错误 #2035：未找到 URL。

我该如何解决这个问题？

【问题讨论】：

标签： apache-flex htmltext

【解决方案1】：

好的，我刚刚花了几个小时整理出来，但我已经让它在 Flash 和 Flex 中工作了。

在 TextField 中显示图像

您可以将 DisplayObjects 加载到 TextField <img /> 标记中，包括 MovieClip、Sprite 和嵌入的图像。

在 Flash 或 Flex 中，如果要显示嵌入图像，则必须创建一个扩展 DisplayObject 类的包装类（例如 Sprite 或 MovieClip）。
确保您的文本字段足够大以包含图像。在测试过程中，当我真的让 TextField 太小而无法显示整个图像时，我认为事情不正常。

Flash 示例

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

在舞台上创建一个动态 TextField。给它一个有用的名字，我叫我的txtImageTest。
将txtImageTest 调整为合适的大小，例如300x150 像素。
创建一个新的 MovieClip 符号并为其命名，例如imageClip1.
在您的新剪辑中绘制一些东西或在imageClip1 中放置嵌入的图像。
返回主时间线，取消选择所有对象并在第一帧打开 Actionscript 编辑器。

在文本字段上打开多行和自动换行：

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>"

保存并测试您的电影。

弹性示例

由于我们不能像在 Flash 中那样在库中创建一个新的 MovieClip，我们需要创建一个执行相同任务的新类（如果您想在 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 中），因为它们不能在 TextField 中正确缩放或定位。选择 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 &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 属性中使用了完全限定的类名。

最后说明

图像与文本字段的左侧或右侧对齐，由图像标记的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 中。

【讨论】：

【解决方案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) + "' />";
    }
}

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

【讨论】：

【解决方案3】：

试试：

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

见documentation。

【讨论】：

谢谢。它可以在本地机器上运行，但在服务器环境中它会抛出：“错误 #2044：未处理的 IOErrorEvent:.text=Error #2035: URL Not Found。”
在服务器环境中，尝试使用 Loader 类加载嵌入的资产。这会告诉你这是否是与路径相关的问题。
同样的错误。这适用于服务器： [Embed(source='../assets/img.gif')] public var img:Class; ... 但嵌入 htmlText - 不是。
有问题的“img”标签是一个 HTML 标签。如文档所述（请参阅我的答案中的链接），此标签不受完全支持。因此，您看到的可能是由不完全支持引起的错误。

【解决方案4】：

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

为什么要在 htmlText 中使用嵌入式图像显示？因为这是在工具提示中显示图像的最简单方法（您只需覆盖默认工具提示类以设置 htmlText 而不是文本，并将其设置为 TooltipManager 中的默认工具提示类）。在我的搜索中，我发现了这个：http://groups.google.com/group/flex_india/browse_thread/thread/cf0aa62afaae3fdc/b21f462f8d5da117?pli=1。尚未对其进行测试，我想问题将出现在确定该链接 ID 上。等我得到它们后，我会回来提供更多详细信息。

【讨论】：

【解决方案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'>";

就是这样。谢谢！

【讨论】：

【解决方案6】：

试试

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

取自：Using the htmlText property

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

小伙伴们不用再为难自己了！从现在开始导入MovieClips不是什么大不了的事！借助名为 TextArea 的新类（不是 TextArea 组件，它是一个 OOP 类，是原始 TextField 类的扩展）。

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

它有很多更多的功能，并不特别局限于这个问题。查看www.doitflash.com了解更多信息，网站提供平台，下载也是免费的 :)

【讨论】：