如何使用 xampp 创建的 mysql 中的数据在 React 中显示图像

Question

我已经使用 nodejs 和 xampp 创建了一个服务器。在 Xampp 的图像中，我使用了 Blob long。使用 react 作为前端，我获取了图像。我将此 img 数据分配给图像 src 但它没有显示。检查图像 src，显示一长串数字。

import React, { useEffect, useState } from "react";

export default function QueryData() {
  const [backenddata, setBackenddata] = useState([]);

  async function fetchData(url) {
    const response = await fetch(url);
    const result = await response.json()
    setBackenddata(result);
  }

  useEffect(() => {
    let url = "http://localhost:3001/"; //xampp server
    fetchData(url);
  }, []);
    
  return (
    <div>
      <img src={backenddata[0]?.ProductImage.data} />
    </div>
  );
}

Answer 1

如果您使用的是 blob，则需要使用以下代码将数据转换为 base64，然后可以在 img 标签 src 中使用 Base64

import React, { useEffect, useState } from "react";

export default function QueryData() {
  const [backenddata, setBackenddata] = useState([]);

  async function fetchData(url) {
    const response = await fetch(url);
    const result = await response.json()
    // result.data should be as arrayBuffer type
    let base64String = btoa(String.fromCharCode(...new Uint8Array(result.data)));
    setBackenddata(base64String);
  }

  useEffect(() => {
    let url = "http://localhost:3001/"; //xampp server
    fetchData(url);
  }, []);
  
  return (
    <div>
      <img src={backenddata} />
    </div>
  );
}

这是一个 arrayBuffer 的例子

Answer 2

图片显示不出来是因为base64编码不正确。您可以通过与 http://jpillora.com/base64-encoder/

中的数据进行比较来验证您的 base64 结果数据

最初我用这个方法转换成bass64

var blob = new Blob(backenddata[0]?.ProductImage.data, {
  type: "image/jpeg",
});
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
  let base64String = reader.result;
  setImagesrc(base64String); //assigned to state. This base64 value was wrong compared to data from http://jpillora.com/base64-encoder/
};

所以我已经更改为以下代码，它是正确的并且与 http://jpillora.com/base64-encoder/

相同

  var base64String = btoa(
    String.fromCharCode(...new Uint8Array(backenddata[0]?.ProductImage.data))
  );
  setImagesrc(base64String);

如何使用 xampp 创建的 mysql 中的数据在 React 中显示图像

How to show image in react using the data from mysql created by xampp

mysql

xampp

reactjs