Блог

Я использовал 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>
  );
}
  

Если вы используете blob, вам необходимо преобразовать ваши данные в base64 с помощью следующего кода, тогда вы можете использовать Base64 в вашем теге img 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()
    // 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

Причина, по которой изображение не отображалось, потому что закодированный base64 был неправильным. Вы можете проверить свои результирующие данные base64, сравнив их с данными изhttp://jpillora.com/base64-encoder /

Изначально я использовал этот метод для преобразования в 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);