Reactjs 图像不显示，尽管是Base64格式

我将图像保存在数据库中，作为数据库类型BLOB中的Base64。保存工作没有任何问题。但现在我想展示这张图片。图像以JSON格式与其他属性一起从我的后端发送到前端。图像具有以下格式

<input accept="image/*"
       className={classes.input}
       id="icon-button-file"
       type="file"
       onChange={handleChange}
 />

<Button variant="contained"
        color="secondary"
        onClick={() => bildÜbernehmen()}>
        übernehmen
</Button>

const handleChange = async (e) => {
if (e.target.files[0]) {
  const base64 = await convertbase64(e.target.files[0]);
  setBase64(base64);
 }
};

const convertbase64 = (file) => {
 return new Promise((resolve, reject) => {
  const fileReader = new FileReader();
  fileReader.readAsDataURL(file);

  fileReader.onload = () => {
    resolve(fileReader.result);
  };

  fileReader.onerror = (error) => {
    reject(error);
  };
  });
 };


const bildÜbernehmen = async () => {
setAmLaden(true);

const data = new FormData();

data.append("bild", base64);
data.append("name", "Test");
data.append("beschreibung", "T");
data.append("preis", "20.56");
data.append("ersteller", "Ben");

{
  base64 &&
    (await axios
      .post(url + "/NeuesBild", data, {
        onUploadProgress: (progressEvent) => {
          console.log(
            "Upload Progress: " +
              Math.round(
                (progressEvent.loaded / progressEvent.total) * 100
              ) +
              "%"
          );
        },
      })
      .then((res) => {
        setAmLaden(false);

        console.log(res.data[0].bild);
        übernehmeNeuesBild(res.data[0].bild);
        setBase64(res.data[0].bild);
      }));
    }
  };

bildÜbernehmen（）}>
吕伯内曼
常量handleChange=async（e）=>{
if（e.target.files[0]）{
const base64=wait convertbase64（e.target.files[0]）；
挫折64（基本64）；
}
};
const convertbase64=（文件）=>{
返回新承诺（（解决、拒绝）=>{
const fileReader=new fileReader（）；
fileReader.readAsDataURL（文件）；
fileReader.onload=（）=>{
解析（fileReader.result）；
};
fileReader.onerror=（错误）=>{
拒绝（错误）；
};
});
};
const bildÜbernehmen=async（）=>{
setAmLaden（真）；
const data=新表单数据（）；
数据。附加（“bild”，base64）；
数据。附加（“名称”、“测试”）；
数据。附加（“beschreibung”、“T”）；
数据。附加（“preis”，“20.56”）；
数据。附加（“ersteller”、“Ben”）；
{
base64&&
（等待axios
.post（url+“/NeuesBild”，数据{
onUploadProgress：（progressEvent）=>{
console.log(
“上载进度：”+
数学圆(
（progressEvent.loaded/progressEvent.total）*100
) +
"%"
);
},
})
。然后（（res）=>{
setAmLaden（假）；
console.log（res.data[0].bild）；
übernehmeNeuesBild（res.data[0].bild）；
setBase64（res.data[0].bild）；
}));
}
};

从数据库读取时，图像的格式如下：

最初加载页面时，我使用Effect显示图像。但这不起作用，因为我看不到图片

  React.useEffect(() => {
   axios.get(url + "/getSetting").then((res) => {
   setProfilBild(res.data[0].bild));
 });
 }, []);

 <img alt="Test" src={profilBild} height="100%" width="100%" />

React.useffect（（）=>{
获取（url+“/getSetting”）。然后（（res）=>{
setProfilBild（res.data[0].bild））；
});
}, []);

当我使用浏览器调试器查看程序代码时，我看到src设置正确

---

你确定这不是CSS的问题吗？您是否尝试在新窗口中打开它（右键单击base64 src>open in new window）？Base64看起来不错。