reactjs - 获取数据：图像/jpg；base64，假网络：：ERR_INVALID_URL

Question

尝试使用从后端获取的 base64 图像时出现错误。所有后端 API 都正常工作。我也收到了所有 base64 图像作为响应，但是图像没有出现，我也收到了这个错误。任何人都可以解决这个问题吗？先感谢您。:)

使用效果挂钩：

 useEffect(()=>{
        const config={
          headers:{
            "Content-Type":"application/json",
            Authorization:`Bearer ${localStorage.getItem("token")}`
          }
      
        }
    axios.get(`/api/user/public/getalbums/${id}`,config ).then(({data})=>{
      setAlbum(data);
      const arr=[];
      for(let i=0;i<data.length;i++){
        axios.get(`/api/user/private/readimage/${data[i].fileUrl}`,config).then((res)=>{
       console.log(res.data);
       console.log("res");
        arr.push(res.data);
        
        // setPhotos([...photos,res.data])
        
        })
      

      }
      console.log(arr);
      setPhotos(arr);

        // setPhotos([...photos,res.data])
        
    
    }
    ) 

      },[])

图片：

{album.length>0 && album.map((data,ind)=>{
          return(
            
            <div key={ind}>
            <div className='album-card-1' ><img className="album-card-img" src={`data:image/jpg;base64, ${photos.length>0 && photos[ind]}`}  onClick={()=>{
                navigate(`/artist/${id}/user/album/${data._id}`)
             }}/></div>
          </div>
           
          )
        }
        )}

错误：

data:image/jpg;base64, false
net::ERR_INVALID_URL

Answer 1

您的 HTML 代码是正确的，如果 base64 正确显示，它应该显示正确的图像。可能您的错误在于与相册和照片数组相关的逻辑。请添加这些数组值的示例（您正在打印的 console.log）。

此外，您可以在渲染 JSX 之前添加一个验证，检查 base 64 是否为假：

return album.length > 0 && album.map((data, ind) => {
  return photos.length > 0 && photos[ind] && (
    <div key={ind}>
      <div className='album-card-1'>
        <img className="album-card-img" src={`data:image/jpg;base64, ${photos[ind]}`} onClick={() => navigate(`/artist/${id}/user/album/${data._id}`)}/>
      </div>
    </div>
  )
});