在 html 中将上传的图像显示到 div

Question

我现在可以将图像上传到我的服务器。 现在我想在div 容器中自动显示相同的图像。

我不想使用这个<img src= "image.png">

我怎么能意识到这一点？我只需要使用节点和JavaScript

这是我的上传代码，它可以工作

server.use(upload())
server.get('/', (req, res) =>{
res.sendFile(__dirname + '/home.html')
})
server.post('/', (req,res)=>{
if(req.files){
console.log(req.files)
var file = req.files.file
var filename = file.name
console.log(filename)
file.mv('./upload/' + filename, function(err){
if(err){
res.send(err)
}else{
res.send("File Uploaded")
}
})
}
});

这是我想要我的图像的html

<div class="wrapper">
<h2><legend>Your image here</h2>
</div>

Answer 1

好的，我建议使用<img/>标签，因为它对可访问性更好，而且这只是很好的做法。我知道当我开始时，我只会使用div作为图像，因为它们看起来最好。但是，有更好的方法。此链接应为您提供有关如何使 img 标签与div 很好地配合使用的所有信息： https://css-tricks.com/almanac/properties/o/object-fit/- 代码是：

div{
object-fit: cover; /* Change to whatever styling you need */
}
<div class="wrapper">
<h2><legend>Your image here</h2>
<img src="image.png" alt="Describe your image">
</div>

但是，如果这真的不是您要找的方法，您可以使用 'url' 属性将图像应用于div 样式中的背景图像。例如：

div{
background-image: url('/path/to/img');
}
<div class="wrapper">
<h2><legend>Your image here</h2>
</div>

这也可以使用内联样式来完成：

<div class="wrapper" style="background-image: url('/path/to/img');">
<h2><legend>Your image here</h2>
</div>

您可能需要对背景图像进行一些进一步的样式设置，以实现所需的外观。这个链接：https://www.w3schools.com/cssref/pr_background-image.asp 应该涵盖大部分主题。要看的主要事项是：

• 背景重复，
• 背景大小，以及
• 背景位置