对象HTMLImageElement显示而不是图像

时间:2014-07-18 10:17:59

标签: javascript html polymer

我创建了一个包含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>

我在这里缺少什么?

3 个答案:

答案 0 :(得分:4)

使用:

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

修改:原始问题的更改已使其余的答案过时。但是我还是要离开它,希望OP或某人可以学到一些东西。

  

我得到了文本:object HTMLImageElement

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

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

(编辑:这里发生的是:您新创建的对象items[0]HTMLImageElement。当您尝试将其分配给innerHTML时,因为innerHTML是类型String的JavaScript将尝试调用对象toString()方法并将返回值设置为innerHTML。对于DOM元素toString,始终返回object XElement。)< / p>

您需要做的是:

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

答案 1 :(得分:3)

最简单,最安全的方法是将img放入模板中并绑定srctitle属性,如下所示:

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

答案 2 :(得分:0)

替换

    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个对象;)