oskolade
@oskolade

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

В БД 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....


соответственно отобразить её я не могу. Помогите пожалуйста разобраться или дайте ссылку на то, как это надо делать.
  • Вопрос задан
  • 684 просмотра
Решения вопроса 1
oskolade
@oskolade Автор вопроса
Спасибо, изучу.
Вот вопрос на Stackowerflow, действуя по которому я обрёл счастье.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Che603000
c 2011 javascript
при попытке забрать фоторграфию вижу, что 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/???
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы