Fetch image in React from Node.js request

Question

When needed, React asks for an image using 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 answers this way :

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

But I don't know how to get the image in React.

console.log(response.file) is undefined.

console.log(response.files[0]) is undefined.

console.log(response.body) is null.

console.log(response) gives me :

How do I get the image in a var ? Thank you.

SOLUTION :

In 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);
    });

React :

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);
        }
       })

score 1 · Answer 1 · answered Jul 23 '18 at 09:05

I am using axios (but it will be similar) this is how I get my images.

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

I think the response type is the important thing here.....but I have node sending it as a stream (as I am retrieving from mongo etc....)

score 0 · Answer 2 · answered Jul 24 '18 at 09:31

SOLUTION :

In 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);
    });

React :

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);
        }
       })

score -1 · Answer 3 · answered Jul 23 '18 at 07:40

Use Axios package to fetch a POST Request in React. https://github.com/axios/axios

https://github.com/axios/axios

you need to send a request to fetch image or post image. Just an Example.

This is a function in React.

 async sendEmail(name,interest,email,phone,message){


          const form = await axios.post('/api/form',{
            name,
            interest,
            email,
            phone,
            message
        })

    }

This will send the request to Nodejs here:

app.post('/api/form',(req,res)=>{

        console.log(req.body);
        console.log(123);
        const output = `
    <p> You have a  Request</p>
        <h3> Contact Details </h3>
        <ul>
            <li> Name : ${req.body.name}</li>
            <li> Interest : ${req.body.interest}</li>
            <li> Email : ${req.body.email}</li>
            <li> Email : ${req.body.phone}</li>
            <li> Email : ${req.body.message}</li>
        </ul>
    `;

This is how Fetch request is also done, but fetching part will be in React Code.

Anyways read the Axios Documentation. it will be having various examples about it.

Superagent is equivalent to Axios so it won't solve my problem. Furthermore, your example show a form with text data and I need a simple image from Node.js — Pol Grisart, Jul 23 '18 at 07:52

Fetch image in React from Node.js request

3 Answers3

Linked