Как отобразить в React картинку из MySQL?

Question

[oskolade]

В БД MySQL хранятся картинки. Пытаюсь отобразить картинку с помощью React. Для получения данных из БД настроил Express. Картинка хранится в БД в столбце типа mediumblob. В БД оно хранится в кодировке Base64, выглядит как

iVBORw0KGgoAAAANSUhEUgAABQAAAAPACAYAAABq3NR5AAAgAElEQVR4AezBCZzXc+I4/uf70zSmTMd0rIqwSWzLLiK5i9....

Настраиваю Express забирать эти данные:

const mysql = require("mysql");
const bodyParser = require("body-parser");
const express = require("express");
const app = express( );
const port = 4000;
app.use(bodyParser.json( ));

var mysqlConnection = mysql.createConnection({
  host: "host",
  user: "user",
  password: "password",
  database: "db"
});
mysqlConnection.connect((err) => {
  if (!err) {
    console.log("DB Connected");
  }  else  {
      console.log("DB Connection Failed  " + err.message);
  }
});

app.get("/rf", (req, res, next) => {
  mysqlConnection.query(
    "SELECT photo FROM  photo WHERE id=365",
    function(err, results, fields) {
      if (err) throw err;
      res.set("Access-Control-Allow-Origin", "*");
      res.send(results);
    }
  );
});

app.listen(port, ( ) => {
  console.log(`Listening at http://localhost:${port}`);
});

при попытке забрать фоторграфию вижу, что Express отдаёт мне не base64 строку, а, как я понял, Unit8Array, вида:

[{"photo":{"type":"Buffer","data":[105,86,66,79,82,119,48,75,71,103,111,65,65,65,65,78,83,85,104,69....

соответственно отобразить её я не могу. Помогите пожалуйста разобраться или дайте ссылку на то, как это надо делать.

Answer 1

[oskolade]

Спасибо, изучу.
Вот вопрос на Stackowerflow, действуя по которому я обрёл счастье.

Comments

[AntoniMakaroni]

Доброго времени суток, у меня такая же проблема, а ссылки на вопрос на Stackowerflow я не нашел..(((
напишите решение тут пожалуйста или скиньте ссылку на Stackowerflow плз
заранее очень благодарен!

Answer 2

[Александр Черемхин]

при попытке забрать фоторграфию вижу, что Express отдаёт мне не base64 строку, а, как я понял, Unit8Array, вида:
[{"photo":{"type":"Buffer","data":[105,86,66,79,82,119,48,75,71,103,111,65,65,65,65,78,83,85,104,69....

Это вам отдаёт mysqlConnection.query отдаёт он result содержащий свойство «photo» типа Blob
{ phone: Blob}
https://developer.mozilla.org/ru/docs/Web/API/Blob
Переведите это photo в base64
https://www.geeksforgeeks.org/how-to-convert-blob-...
и отправьте все это клиенту.
Не забудьте указать правильный тип картинки в headers response Content-Type: image/???