I wrote an API that sends back a photo in a response to a request. On a client side I get this image and try to render it as a background-image for my element. But the image won't be displayed. I'm not sure whether the problem lies within server API or my file reading approach. Comments below. I'm using Node.js, Express and axios to get this thing done.

I read many recipes on the internet how to send image and render it and ended up with the following code.

Server API (Node):

router.get('/photo', getProfilePhoto)

function getProfilePhoto(req, res, next) {
    const { userId } = getUserIdAndTokenFromRequest(req);
    const projectRootDir = path.dirname(require.main.filename);
    const filePath = path.join(projectRootDir, '..', 'files', 'main_profile_photos', `${ userId }`, 'main_profile_photo.jpg');
    console.log('filePath', filePath);
    res.sendFile(filePath, (err) => {
        console.log(err)
        next();
    });
}

Client

async getUserMainInfo(userId) {
    const data = {};
            
    const photoRes = await ax.get(
        `http://localhost:3000${ FILE_READER_RELATIVE_URL }/photo`
    );
    console.log('photoRes', photoRes);

    const blob = new Blob([ photoRes.data ], { type: 'image/jpeg' });
    const reader = new FileReader();

    return new Promise(resolve => {
        reader.onload = () => {
            data.photo = reader.result
            console.log('reader.result', reader.result);
            resolve(data);
        }
        reader.readAsDataURL(blob)
    });
},

On the client, I receive the following data:

ax here is axios imported as-is from axios module. Here I convert received data into base64 in order to apply the resulting string (data.photo) as a background-image for an element. But the image doesn't seem to appear. I tried to convert the resulting base64 string into an image by using some services on the Internet and found that the result is not an image at all. I double-checked this by using image to base64 converter and noticed that the result is different from what I get on the client.

Client conversion result:

data:image/jpeg;base64,77+977+977+977+9ABBKRklGAAEBAAABAAEAAO+/ve+/vQD...

Image to base64 converter:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wC...

Considering the above, I ended up with two assumptions which I'm stuck at:

1. File is not sent correctly from Node server.
2. I'm parsing received data the wrong way.

The question is: where I'm wrong?