objet HTMLImageElement montrant la place de l'image

J'ai créé un tableau de 2 images et essayé de les afficher, mais plutôt des images que j'ai reçu le texte:
object HTMLImageElement

Je suis sûr que mes images sont dans le bon répertoire, dont je suis actuellement en train de travailler.

< template is="auto-binding">
   <section flex horizontal wrap layout>

    <template repeat="{{item in items}}">
      <my-panel>{{item}}</my-panel>
    </template>

</section>
  <script>
  (function() {
    addEventListener('polymer-ready', function() {
        var createImage = function(src, title) {
              var img   = new Image();
              img.src   = src;
              img.alt   = title;
              img.title = title;
              return img; 
            };


    var items = [];

    items.push(createImage("images/photos/1.jpeg", "title1"));
    items.push(createImage("images/photos/2.jpeg", "title2"));

    CoreStyle.g.items = items;

      addEventListener('template-bound', function(e) {
        e.target.g = CoreStyle.g;
        e.target.items = items;
      });
    });

  })();
  </script>

Ce qui me manque ici?

Êtes-vous d'ajouter à la DOM n'importe où?
Vous devez utiliser appendChild. Comment êtes-vous de l'insérer à DOM? Veuillez fournir le code.
"a obtenu le texte", comment, exactement? Dans la cité de code vous n'êtes pas afficher ou d'exporter ou de faire quelque chose de visuel avec les résultats de createImage.
votre Image() est un objet, lorsque vous les convertir en string et d'impression sur votre page, il va faire une simple .toString() et vous pourrez évidemment recevoir object HTMLImageElement... si vous souhaitez être ajouté correctement l'html, soit utiliser un construit en fonction append ou de prendre l'intérieur html de l'image et d'ajouter que
Tu veux dire outerHTML - les images ne peuvent pas avoir innerHTML 😉

OriginalL'auteur user3764893 | 2014-07-18

  1. 3

    La méthode la plus simple et la plus sûre façon de le faire est de mettre l'img dans le modèle et de lier le src et title attributs comme ceci:

    <template repeat="{{item in items}}">
  <my-panel><img src="{{item.src}}" alt="{{item.title}}" title="{{item.title}}"></my-panel>
</template>

    Puis createImage ressemble à ceci

    var createImage = function(src, title) {
  return {src: src, title: title};
}

    OriginalL'auteur dfreedm

  2. 3

    Utilisation:

    items.push(createImage(...).outerHTML);

    Modifier: les Modifications à la question d'origine qui a rendu le reste de la réponse obsolètes. Mais je pars de toute façon, dans l'espoir que l'OP ou quelqu'un peut apprendre quelque chose.

    J'ai reçu le texte: objet HTMLImageElement

    Je suis sûr que vous êtes en utilisant quelque chose comme cela pour ajouter le nouvel élément à DOM:

    document.getElementById('#insert_image_here').innerHTML = items[0];

    (Edit: Ce qui se passe ici est: est-ce votre objet nouvellement créé items[0] est un HTMLImageElement. Lorsque vous essayez d'assigner à innerHTML, depuis innerHTML est le type de String, JavaScript, essayez d'appeler les objets toString() méthode et de définir la valeur retournée innerHTML. Pour les éléments du DOM toString retourne toujours object XElement.)

    Ce que vous devez faire est ceci:

    document.getElementById('#insert_image_here').appendChild(items[0]);
    J'ai ajouté le code complet.
    J'ai mis à jour la réponse. Si vous insistez toujours sur l'utilisation de la matrice des objets de l'Image essayez de remplacer <my-panel>{{item}}</my-panel> avec <my-panel>{{item.outerHTML}}</my-panel> (je ne sais pas une chose à propos de polymère. Mais on dirait qu'il peut exécuter un code JavaScript. Donc, je ne suis même pas sûr si cela va introduire une erreur. Mais essayer quand même.)
    ouais j'ai essayé avec les deux façons que vous avez suggéré et il n'affiche plus que les images/photos/1.jpeg" alt="title1" title="title1"> ...

    OriginalL'auteur sampathsris

  3. 0

    Remplacer

        var createImage = function(src, title) {
          var img   = new Image();
          img.src   = src;
          img.alt   = title;
          img.title = title;
          return img; 
        };

    Avec

    var createImage = function(src,title) {
    title = title.replace(/"/g,"&quot;");
    return '<img src="'+src+'" title="'+title+'" alt="'+title+'" />';
}

    Il ressemble à ce que cadre de truc que vous utilisez attend chaînes, pas Image objets 😉

    Mais ce serait me donner uniquement des chaînes de caractères. J'ai besoin de Image objets
    je pense que vous devriez lire comment fonctionne le html d'abord mon ami
    Logique :). Toute suggestion sur la façon de créer une matrice d'images et de les afficher?

    OriginalL'auteur Niet the Dark Absol