Why doesn't the image appear in react?

Question

I'm getting the base64 image from the server, the image does not appear.

error message:

GET data:image/png;base64,{base64 string} net::ERR_INVALID_URL

  <img src={data?.gameIcon} alt="" className={styles.gameIcon} id="img"/>

The BASE64 image is currently stored in MySQL and is loaded with that data. How can I solve this problem?

Answer 1

Take 1: Probably you are not getting your data?.gameIcon or your class is hiding the image. Either check if you are getting the data or update your css.

Take 2: Pass your base64 string with filename to this function and then show the file returned as output.

/**
 * Converts a base64 string to a javascript file object
 * @param base64String string
 * @returns file object
 */
export const base64ToFile = (base64String: string, fileName: string) => {
  let arr: any = base64String.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n)
;

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
;
  }

  return new File([u8arr], fileName, { type: mime });
};