如何在 React 页面上显示存储在 MySQL 中的图像答案

【问题标题】：How to show image, stored in MySQL on React page如何在 React 页面上显示存储在 MySQL 中的图像
【发布时间】：2021-01-08 11:34:37
【问题描述】：

我在 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}`);
});

当尝试在 http://localhost:4000/rf 获取数据时，我收到的不是 base64 字符串，而是 Unit8Array，它看起来像：

[{“照片”：{“类型”：“缓冲区”，“数据”：[105,86,66,79,82,119,48,75,71,103,111,65,65,65,65,78,83 ,85,104,69....

而且我无法在页面上显示它。请帮助我，或者给我解决这个问题的样本。

【问题讨论】：

在img标签中 src="data:image/png;base64,"
也许这个问题有你的问题的答案。 stackoverflow.com/questions/12710001/…

标签： mysql reactjs image express base64

【解决方案1】：

大概你想在你的网页中放置一个图像标签，看起来像这样。

<img src="http://localhost:4000/rf" />

并让您的 /rf 端点传送图像。如果不是这种情况，请编辑您的问题。

为此，您必须使用正确的 MIME 类型将二进制图像传送到浏览器。首先从Base64解码，然后设置MIME类型，然后发送。这样的代码可能会有所帮助。

 function(err, results, fields) {
  if (err) throw err;
  if (results && results.length >= 1) {    /* results is an array */
    const imgdata = Buffer.from(results[0].photo, 'base64')
    res.type('png').send(imgdata)
}

请注意，大多数浏览器都会接受 JPEG。 GIF 和 PNG，只要它们具有任何一种有效的 MIME 类型（例如image/png）。这对您来说是幸运的，因为您看起来不像在表中存储每个图像的 MIME 类型。

顺便说一句，使用 npm cors 包来做你的 CORS 工作，而不是在你自己的代码中插入额外的 CORS 标头。 CORS 是 xxx 脖子痛调试，包已经调试好了。

最后，请注意，将图像存储在数据库中的扩展性很差。如果您获得大量流量，您不希望您的 MySQL 服务器成为瓶颈。最好将图像放在静态文件系统中，并将它们的路径存储在数据库中。

【讨论】：