object htmlageelement显示而不是image

object HTMLImageElement showing instead of image

本文关键字：image htmlageelement 显示 object      更新时间：2023-09-26

我创建了一个包含2个图像的数组，并试图显示它们，但我得到的不是图像，而是文本:
object HTMLImageElement

我确信我的图像是在正确的目录，我目前正在使用。

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

我在这里错过了什么?

使用说明:

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

Edit:原题的更改使答案的其余部分作废。但我还是离开了，希望OP或其他人可以学到一些东西。

我得到了text: objecthtmlageelement

我很确定你正在使用这样的东西来添加新的元素到DOM:

document.getElementById('#insert_image_here').innerHTML = items[0];
(编辑:这里发生的事情是这样的:你新创建的对象items[0]是一个HTMLImageElement。当您尝试将其分配给innerHTML时，因为innerHTML是String的类型，JavaScript将尝试调用对象的toString()方法并将返回值设置为innerHTML。对于DOM元素，toString总是返回object XElement。

你需要做的是:

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

最简单和最安全的方法是将img放入模板中，并像这样绑定src和title属性:

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

那么createImage看起来像这样

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

Replace

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


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

它看起来像任何框架的东西，你正在使用期待字符串，而不是Image对象;)

相关文章：