如何在反应中将缓冲区数据显示为图像

Question

如何在react中显示图像。 ... ..

function App() {
  const [data, setData] = useState();
  useEffect(()=>{
    const getdata= async()=>{
    const response  = await axios.get('http://localhost:8000')
    setData(response.data)
    }getdata()
   }, [])
return (
  <div>
   {data && <img src={"data:image/jpg;base-64,"+data} alt='image'></img>}  
 </div>
 );
}

来自后端的后端

 const schema = mongoose.Schema({
    img:{data:Buffer,contentType:String},
    name:{type: String}
  })
 const imageModel = mongoose.model('images', schema)

 app.get("/", function(req, res, next) {
 imageModel.findOne({}, function(err, image) {
 if (err) { return next(err); }
  res.json(image.img.data);
  });
}); 

响应 https://i.sstatic.net/x4cSB.png

Answer 1

您可以使用image.img.data.toString("base64")将缓冲区从数据库转换为base64表示形式。因此，您需要在后端进行以下更改：

app.get("/", function(req, res, next) {
  imageModel.findOne({}, function(err, image) {
  if (err) { return next(err); }

  // Replace the buffer array with base64 data
  const imgBase64 = image.img.data.toString("base64");
  image.img.data = imgBase64;

  // Send the object
  res.json(image.img);
});