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

Question

我在 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，它看起来像：

[{"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

您可能想在您的网页中放置一个看起来像这样的图像标签。

<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）。这对你来说是幸运的，因为它看起来不像你在 table.

中存储每个图像的 MIME 类型

顺便说一下，使用 npm cors 包来处理 CORS，而不是在您自己的代码中插入额外的 CORS headers。 CORS调试起来是个xxx脖子上的痛，包已经调试好了

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

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

How to show image, stored in MySQL on React page

mysql

base64

image

express

reactjs