将上传的图片显示到html中的div答案

【问题标题】：Display the uploaded image to div in html将上传的图片显示到html中的div
【发布时间】：2020-05-31 16:24:28
【问题描述】：

我现在可以将图像上传到我的服务器。现在我想在 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>

【问题讨论】：

上传图片不需要 PHP，PHP 只是一种可用于服务器端代码的语言。图片预览回复here，图片上传回复here我觉得this tutoria涵盖了你需要的一切。

标签： javascript html css node.js display

【解决方案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 应该涵盖大部分主题。主要看的东西是：

后台重复，
背景尺寸和
背景位置

【讨论】：