时间戳

首页 > 解决方案 > 从 Node.js 请求中获取 React 中的图像

node.js - 从 Node.js 请求中获取 React 中的图像

问题描述

需要时，React 会使用 Superagent 请求图像：

exports.getImgFromSection=function(id,request){
    request
       .get('/img/'+id)
       .end((error, response) => {
           if (!error && response) {
               console.log(response.file);
           } 
           else {
               console.log('There was an error fetching server', error);
           }
       })

}

Node.js 以这种方式回答：

app.get("/img/:id",function(req, res){ 
   // check if exists and then
        res.sendFile(path.join(__dirname, './data/img/'+req.params['id']+'.png'));
});

但我不知道如何在 React 中获取图像。

console.log(response.file)是未定义的。

console.log(response.files[0])是未定义的。

console.log(response.body)一片空白。

console.log(response)给我 ：

控制台日志（响应）

如何在 var 中获取图像？谢谢你。

解决方案 ：

在 node.js 中：

var img = fs.readFile('./data/imagesUploaded/image.png', function (err, data) {
        var contentType = 'image/png';
        var base64 = Buffer.from(data).toString('base64');
        base64='data:image/png;base64,'+base64;
        res.send(base64);
    });

反应：

request
       .get('/img/'+imgID)
       .end((error, response) => {
        if (!error && response) {
            this.setState({img1:response.text})
        } else {
            console.log('There was an error fetching server', error);
        }
       })

标签： node.jsreactjsimagesuperagentsendfile

解决方案

我正在使用 axios（但它会相似）这就是我获取图像的方式。

  const res = await axios.get(`/image/${imageId}`, {
    responseType: 'arraybuffer'
  });
  const imgFile = new Blob([res.data]);
  const imgUrl = URL.createObjectURL(imgFile);

我认为响应类型在这里很重要......但是我有节点将它作为流发送（因为我正在从 mongo 等检索......）

推荐阅读