我创建了一个包含 2 个图像的数组并尝试显示它们,但我得到的不是图像而是文本:
对象 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);
编辑:对原始问题的更改使其余答案已过时。但无论如何我都会离开它,希望 OP 或其他人可以学到一些东西。
I got the text: object HTMLImageElement
我很确定您正在使用类似这样的方法将新元素添加到 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]);
关于javascript - 对象 HTMLImageElement 显示而不是图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24822631/