javascript 对象 HTMLImageElement 显示而不是图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24822631/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
object HTMLImageElement showing instead of image
提问by user3764893
I created an array of 2 images and tried to display them, but instead of the images I got the text:object HTMLImageElement
我创建了一个包含 2 张图像的数组并尝试显示它们，但我得到的不是图像而是文本：object HTMLImageElement
I am sure my images are in the right directory which I am currently working with.
我确信我的图像位于我目前正在使用的正确目录中。
< 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>
What am I missing here?
我在这里错过了什么？
采纳答案by dfreedm
The easiest and safest way to do this is to put the img in the template and bind the srcand titleattributes like this:
最简单和最安全的方法是将 img 放在模板中并像这样绑定src和title属性：
<template repeat="{{item in items}}">
<my-panel><img src="{{item.src}}" alt="{{item.title}}" title="{{item.title}}"></my-panel>
</template>
Then createImagelooks like this
然后createImage看起来像这样
var createImage = function(src, title) {
return {src: src, title: title};
}
回答by sampathsris
Use:
利用：
items.push(createImage(...).outerHTML);
Edit: Changes to original question has rendered the rest of the answer obsolete. But I am leaving it anyway in the hope that OP or someone may learn something.
编辑：对原始问题的更改已使答案的其余部分过时。但无论如何我还是要离开它，希望 OP 或其他人可以学到一些东西。
I got the text: object HTMLImageElement
我得到了文本：对象 HTMLImageElement
I am pretty sure you are using something like this to add the new element to DOM:
我很确定您正在使用这样的东西将新元素添加到 DOM：
document.getElementById('#insert_image_here').innerHTML = items[0];
(Edit: What happens here is this: your newly created object items[0]is an HTMLImageElement. When you try to assign it to innerHTML, since innerHTMLis type of String, JavaScript will try to call the objects toString()method and set the returned value to innerHTML. For DOM elements toStringalways returns object XElement.)
（编辑：这里发生的事情是：您新创建的对象items[0]是HTMLImageElement。当您尝试将其分配给 时innerHTML，由于innerHTML是 类型String，JavaScript 将尝试调用对象toString()方法并将返回值设置为innerHTML。对于 DOM 元素toString总是返回object XElement。 )
What you need to do is this:
你需要做的是：
document.getElementById('#insert_image_here').appendChild(items[0]);
回答by Niet the Dark Absol
Replace
代替
var createImage = function(src, title) {
var img = new Image();
img.src = src;
img.alt = title;
img.title = title;
return img;
};
With
和
var createImage = function(src,title) {
title = title.replace(/"/g,""");
return '<img src="'+src+'" title="'+title+'" alt="'+title+'" />';
}
It looks like whatever framework thingy you're using is expecting strings, not Imageobjects ;)
看起来您使用的任何框架都在期待字符串，而不是Image对象；)
