Impossible d'accéder à des images intégrées dans htmlText

https://stackoverflow.com/questions/783710

13-09-2019
|

Question

Les images peuvent être inclus dans les contrôles de TextArea en utilisant la propriété htmlText:

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

Comment puis-je Les images incorporées de référence

Un exemple:

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

fonctionne sur la machine locale, mais dans un environnement de serveur, il lance:

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

Comment puis-je résoudre ce problème?

La solution

Essayez:

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

Voir documentation .

Autres conseils

OK, je viens de passer quelques heures de tri ceci, mais je l'ai travail dans Flash et Flex.

Affichage des images dans un champ de texte

Vous pouvez charger DisplayObjects dans les balises <img /> TextField y compris MovieClips, sprites et images incorporées.

Flash ou Flex si vous souhaitez afficher une image intégrée, vous devrez créer une classe wrapper qui étend une classe DisplayObject (par exemple Sprite ou MovieClip).
Assurez-vous que votre champ de texte est assez grand pour contenir l'image. Au cours des essais, je pensais que les choses ne fonctionnaient pas quand je vraiment eu le TextField trop petite pour afficher l'image.

Flash Exemple

Exemple simple, tout le code est sur le scénario principal.

Créer un champ de texte dynamique sur la scène. Donnez-lui un nom utile, j'appelle txtImageTest mine.
Redimensionnement txtImageTest à une taille décente, par exemple 300x150px.
Créer un nouveau symbole MovieClip et lui donner un nom de classe, par exemple imageClip1.
Dessine quelque chose dans votre nouveau clip ou placer une image intégrée à l'intérieur imageClip1.
Retour à la timeline principale, désélectionner tous les objets et ouvrez l'éditeur Actionscript sur la première image.

Activer multiligne et mot d'emballage sur le champ de texte:

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

Enregistrez et testez votre film.

Flex Exemple

Puisque nous ne pouvons pas simplement créer un nouveau MovieClip dans la bibliothèque comme nous l'avons fait dans Flash, nous devons créer une nouvelle classe qui exécute la même tâche (cette méthode fonctionne également en Flash si vous voulez voulez créer un nouveau clip la bibliothèque).

Voici ma classe pour une balle de triangle noir, appelé 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);
        }

    }
}

Remarque: Do pas étendre Bitmap (Flash) ou BitmapAsset (Flex) car ils ne pas à l'échelle ou la position correctement dans le champ de texte. Choisissez Sprite ou quelque chose de similaire.

Voici un exemple d'une classe qui affiche cette image dans le champ de texte:

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

Notez que je suis en utilisant le nom de classe entièrement qualifié dans l'attribut src de la balise image.

Notes finales

Les images sont alignés à gauche ou à droite d'un champ de texte tel que déterminé par l'attribut align de la balise d'image. Cela signifie que vous ne pouvez pas placer une image au milieu du texte sans accéder à l'image directement.
Une liste des attributs pris en charge par la balise d'image est ici:
http://blog.coursevector.com/notes-htmltext
La page TextField LiveDoc est ici:
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3 /flash/text/TextField.html
La fonction getImageReference() est ce que vous devez obtenir une référence les images dans le champ de texte:
http://livedocs.adobe.com /flash/9.0/ActionScriptLangRefV3/flash/text/TextField.html#getImageReference%28%29
Assurez-vous d'utiliser des noms de classe entièrement qualifiés dans l'attribut src.
Assurez-vous que vous déclarez une variable de votre classe d'emballage pour vous assurer qu'il est compilé dans le fichier SWF.

Vous pouvez spécifier les images intégrées comme le src pour les balises HTML img dans htmlText en les faisant référence en utilisant leur nom de classe complet, que vous pouvez déterminer en utilisant getFullyQualifiedClassName). Comme ceci:

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

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

C'est beaucoup plus simple que de créer une classe wrapper pour chaque image qui pourrait être intégré ...

Je cherchais la même chose. L'idée derrière l'utilisation de Embarqué images est d'empêcher le chargement desdites images à partir d'une URL externe. Donc, la réponse acceptée est en réalité pas résoudre le problème. Je l'ai vu la documentation, et ils utilisent aussi une URL là, et que l'image ne REUNIR dans le swf, mais sera chargé lors de l'exécution du serveur. Pourquoi ils appellent cette image est probablement embedded parce qu'il est intégré withing le texte, mais ce que je suis à la recherche est d'utiliser une image qui est intégrée dans le code compilé.

Pourquoi voudriez-vous un spectacle d'image intégré utilisé dans un htmlText? Parce que c'est la meilleure façon d'afficher une image dans une info-bulle (il vous suffit de passer outre à défaut de classe infobulle pour définir le htmlText au lieu du texte, et le définir comme la classe infobulle par défaut dans le ToolTipManager). Dans ma recherche j'ai découvert ceci: http: // groupes .google.com / groupe / flex_india / browse_thread / fil / cf0aa62afaae3fdc / b21f462f8d5da117? PLI = 1 . Ont pas encore le tester, et je suppose que le problème va venir dans la détermination de cet identifiant de liaison. Je reviendrai avec plus de détails quand je les ai.

Sly_cardinal a écrit une réponse très utile. Un grand merci à lui! Je ne pouvais pas résoudre ce problème pour une demi-journée. Sly_cardinal a remarqué que si vous le faites l'image getQualifiedClassName (bitmap embed) est inséré dans le texte est pas correctement juste le coin supérieur gauche. Sly_cardinal a proposé de faire une classe wrapper.

Je veux ajouter une sa réponse

Une nouvelle enveloppe de classe 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);
    }
}
}

L'appel dans le code:

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

Voilà. Merci!

Essayez

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

Tiré de: Utilisation de la propriété htmlText

Utilisez src = 'actifs / img.gif mais vous devrez créer un répertoire actif dans le répertoire du serveur sur lequel le fichier SWF d'application est déployée et placez votre fichier img.gif là. Quand en html, il est à la recherche du fichier par rapport au fichier SWF.

Cela vous permettra d'utiliser le même fichier et un emplacement à la fois le développement et lieux de déploiement.

Il fonctionne sur localhost parce que vous avez l'image sur la machine, donc vous pouvez le charger. Si vous intégrez, il n'est pas téléchargé sur le serveur dans le répertoire spécifié plutôt elle est contenue par le fichier .SWF lui-même. Téléchargez l'image (pour parcourir le téléchargement de votre dossier fichiers source) à la place correspondante dans la sortie de production.

Il n'y a pas besoin de se soucier des plus copains! à partir de maintenant sur l'importation MovieClips n'est pas une grosse affaire! à l'aide de la nouvelle TextArea nommée classe (non textarea le composant, il est une classe POO une extenstion de la classe TextField d'origine).

Nous ne avons pas besoin Embedding ou d'une bibliothèque plus , nous pouvons utiliser le TextArea partout au lieu de Textfield et qui nous permettent d'importer nos propres fichiers SWF comme un lecteur vidéo, parler avatar ou toute autre chose dans la ligne de nos textes.

Il a beaucoup plus de fonctionnalités et ne se limite pas spécifiquement à cette question. Consultez www.doitflash.com pour plus d'informations, le site fournit la plate-forme et le téléchargement, il est également gratuit frais :)

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow