Невозможно получить доступ к встроенным изображениям в htmlText

Изображения могут быть включены в 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.

Как я могу это исправить?


person alexey    schedule 23.04.2009    source источник


Ответы (9)


Пытаться:

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

См. документацию.

person dirkgently    schedule 23.04.2009
comment
Спасибо. Он работает на локальном компьютере, но в серверной среде выдает: Ошибка № 2044: Необработанное событие IOErrorEvent :. text = Ошибка № 2035: URL-адрес не найден. - person alexey; 24.04.2009
comment
В серверной среде попробуйте загрузить встроенные ресурсы с помощью класса Loader. Это скажет вам, если это проблема, связанная с путями. - person dirkgently; 24.04.2009
comment
Та же ошибка. Это работает на сервере: [Embed (source = '.. / assets / img.gif')] public var img: Class; ... ‹mx: Image source = {img} /› Но встроить в htmlText - нет. - person alexey; 24.04.2009
comment
Рассматриваемый тег img является тегом HTML. Как указано в документации (см. Ссылку в моем ответе), этот тег не полностью поддерживается. То, что вы видите, может быть ошибкой, возникшей из-за неполной поддержки. - person dirkgently; 24.04.2009

Хорошо, я только что потратил пару часов, разбираясь с этим, но у меня это работает во Flash и Flex.

Отображение изображений в текстовом поле

Вы можете загружать объекты DisplayObject в теги TextField <img />, включая фрагменты роликов, спрайты и встроенные изображения.

  • Во Flash или Flex, если вы хотите отобразить встроенное изображение, вам нужно будет создать класс-оболочку, который расширяет класс DisplayObject (например, Sprite или MovieClip).

  • Убедитесь, что ваше текстовое поле достаточно велико, чтобы вместить изображение. Во время тестирования я думал, что что-то не работает, когда у меня действительно было слишком мало TextField для отображения всего изображения.


Пример Flash

Простой пример, весь код находится на главной временной шкале.

  1. Создайте динамическое текстовое поле в рабочей области. Дайте ему удобное имя, я зову свое txtImageTest.

  2. Измените размер txtImageTest до подходящего размера, например 300x150 пикселей.

  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);
        }

    }
}

ПРИМЕЧАНИЕ. Не расширяйте 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.
person Sly_cardinal    schedule 13.11.2009

Вы можете указать встроенные изображения в качестве src для HTML-тегов img в htmlText, ссылаясь на них, используя их полное имя класса, которое вы можете определить с помощью getFullyQualifiedClassName). Вот так:

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

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

Это намного проще, чем создавать класс-оболочку для каждого изображения, которое может быть встроено ...

person Ryan Wilson    schedule 20.07.2010

Я искал то же самое. Идея использования встроенных изображений заключается в том, чтобы предотвратить загрузку указанных изображений с внешнего URL-адреса. Итак, принятый ответ на самом деле не решает проблему. Я видел документацию, и они тоже используют там URL-адрес, и это изображение не будет скомпилировано в swf, а будет загружено во время выполнения с сервера. Почему они называют это встроенным изображением, вероятно, потому, что оно встроено в текст, но я ищу использовать изображение, встроенное в скомпилированный код.

Зачем вам нужно использовать встроенное изображение в htmlText? Потому что это самый простой способ отобразить изображение во всплывающей подсказке (вам просто нужно переопределить класс всплывающей подсказки по умолчанию, чтобы установить htmlText вместо текста и установить его как класс всплывающей подсказки по умолчанию в TooltipManager). В своем поиске я обнаружил следующее: http://groups.google.com/group/flex_india/browse_thread/thread/cf0aa62afaae3fdc/b21f462f8d5da117?pli=1. Еще не тестировал, и я предполагаю, что проблема возникнет при определении этого идентификатора связи. Я вернусь с подробностями, когда они будут у меня.

person bug-a-lot    schedule 31.12.2009

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

Вот и все. Спасибо!

person user2499859    schedule 19.06.2013

Пытаться

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

Взято из: Использование свойства htmlText

person CookieOfFortune    schedule 23.04.2009

Используйте src = 'assets / img.gif', но вам нужно будет создать каталог ресурсов в каталоге сервера, на котором развернуто приложение SWF, и поместить туда свой файл img.gif. Находясь в формате html, он ищет файл относительно SWF-файла.

Это позволит вам использовать один и тот же файл и расположение как в местах разработки, так и в местах развертывания.

person Community    schedule 09.09.2009

Он работает на локальном хосте, потому что у вас есть образ на машине, поэтому вы можете его загрузить. Если вы встраиваете его, он не загружается на сервер в указанном каталоге, а содержится в самом файле .SWF. Загрузите изображение (просмотрите его для загрузки из папки исходных файлов) в соответствующее место в продукте.

person Community    schedule 15.09.2009

Нет необходимости больше беспокоить себя, друзья! С этого момента импорт MovieClips не является таким уж большим делом! с помощью нового класса TextArea (не компонента TextArea, это класс ООП, расширение исходного класса TextField).

Нам больше не нужно встраивание или библиотека, мы можем использовать TextArea везде вместо Textfield, что позволяет нам импортировать наши собственные SWF-файлы, такие как видеоплеер, говорящий аватар или что-нибудь еще в строка наших текстов.

Он имеет гораздо больше функций и не ограничивается конкретно этой проблемой. Посетите www.doitflash.com для получения дополнительной информации, сайт предоставляет платформу, и ее загрузка также бесплатна. заряда :)

person Ali    schedule 04.11.2011