Получение текста PNG из БД Postgres и отправка изображения в интерфейс React

Question

У меня есть сервер postgreSQL с таблицей «здания», и он содержит столбец «testimg» с типом данных «текст».Текст представляет собой текст в формате PNG.У меня есть фоновое приложение Express.js, которое успешно подключено к моей базе данных, и у меня есть созданный маршрут, который может прочитать этот столбец (строка 1), чтобы показать содержащийся текст.Я не знаю, как отправить это как файл изображения в мое приложение Front-End React.

Приложение React подключено к маршруту, и я знаю, как вызвать маршрут и получить заголовок и все.Я также знаю, что мне, вероятно, нужно кодировать в базу 64, но я действительно не уверен.Я немного покопался, и это то, что я имею до сих пор.

//in my express app:
router.get('/test_image', ( req, res, next ) => {
  client.query( "select testimg from buildings;" ).then( img_data => {
    let base_64_string = img_data.rows[1].testimg + "\n";
    let img = Buffer.from( base_64_string, 'base64' );
    res.writeHead(
      200, {
     'Content-Type': 'image/png',
     'Content-Length': img.length
    })
    res.end(img);
  } )
})


//in my react app:
let img_query = null;
fetch( '/api/sites/test_image' )
.then( res => { img_query = res;} )
.catch( ( err ) => console.log( 'error:',err ) )

Это дает мне ответ с телом "ReadableStream".Не уверен, правильно ли я поступаю, но мне нужно, чтобы в конечном итоге в img_query содержался мой файл testimg.png.

Answer 1

Это дает мне ответ с телом "ReadableStream"

Это ожидается.Из MDN body ответа - A simple getter used to expose a ReadableStream of the body contents.

Вы можете использовать один из доступных методов для чтения ReadableStream.В этом случае вы можете использовать метод text.От MDN

Принимает поток ответов и считывает его до завершения.Он возвращает обещание, которое разрешается с помощью USVString (текст).

fetch( '/api/sites/test_image' )
  .then( res => res.text() )
  .then( base64img => {
    // base64img is the base64 string
  })
  .catch( ( err ) => console.log( 'error:',err ) )