为什么反应中没有出现图像？

发布于 2025-01-19 15:40:34 字数 294 浏览 3 评论 0原文

我从服务器获取 Base64 图像，图像没有出现。

错误信息：

获取数据：image/png;base64,{base64 string} net::ERR_INVALID_URL

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

BASE64 图像当前存储在 MySQL 中并加载该数据。我该如何解决这个问题？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

探春 2025-01-26 15:40:34

采用1：可能您没有获取数据？游戏机或您的班级隐藏图像。要么检查您是否获取数据或更新CSS。

取2：将带有文件名的base64字符串传递到此功能，然后将返回的文件显示为输出。

/**
 * 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 });
};

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 });
};

回复收藏 0 原文

~没有更多了~