将图像对象作为函数和类参数传递

问题描述 投票:4回答:2

如何在函数/类中传递图像作为参数,或者这是不可能的,如果它是如何解决它?例如:

var tree = new Image();
tree.src = "img/statobj/tree.png"
function additem(dimage){
document.getElementById("myitems").rows[0].insertCell(0).innerHTML ='<div id="invetoryitem" >'+ this.dimage + '</div>'
console.log(dimage) //gets undefined
}

我已经尝试过dimage.src和其他方法,但我使用的似乎没有用:/

javascript html string function ecmascript-6
2个回答
2
投票

像你一样传递它,但要显示它,使用appendChild而不是innerHTML

var tree = new Image();
tree.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg";
function showTree(dimage) {
  document.getElementById("div").appendChild(dimage);
  console.log(dimage);
}

showTree(tree);
<div id="div"></div>

如果你想使用innerHTML,请使用<img>制作srcdimage.src

var tree = new Image();
tree.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg";
function showTree(dimage) {
  document.getElementById("div").innerHTML = "<img src='" + dimage.src + "'>";
  console.log(dimage);
}

showTree(tree);
<div id="div"></div>

1
投票

您必须将该函数命名并通过将图像作为参数传递来调用它。如果您正在使用innerHTML,则必须创建图像标记并将接收到的图像源添加到函数中作为参数

var tree = new Image();
tree.src = "img/statobj/tree.png"
function a(dimage){
document.getElementById("myitems").innerHTML ='<div id="invetoryitem" ><img src="'+dimage.src+ '"></div>'
console.log(dimage) //gets undefined
}
a(tree);
<body id="myitems"></body>
© www.soinside.com 2019 - 2024. All rights reserved.