獲取數據：圖像/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 正確出現，它應該顯示正確的圖像。 可能您的錯誤在於與專輯和照片 arrays 相關的邏輯。 請添加這些 arrays 值的示例（您正在打印的 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>
  )
});