React中使用后端返回的Base64图片时出现net::ERR_INVALID_URL错误的解决求助

我来帮你拆解问题根源，然后给出针对性的修复方案：

问题分析 #

1. 异步请求未正确等待，photos初始为空 #

你在循环里发起的多个axios.get图片请求是异步执行的。当你直接调用setPhotos(arr)时，所有请求还没完成，arr还是空数组。这就导致后续渲染时photos[ind]大概率不存在。

2. 渲染时的条件判断逻辑错误，生成无效URL #

图片src里的表达式：

`data:image/jpg;base64, ${photos.length>0 && photos[ind]}`

当photos[ind]不存在时（比如请求未返回、数组长度不足），photos.length>0 && photos[ind]会返回false，最终拼接出的src就变成了data:image/jpg;base64, false，这正是浏览器抛出ERR_INVALID_URL的原因。

修复方案 #

步骤1：用Promise.all等待所有图片请求完成 #

修改useEffect中的代码，把所有图片请求包装成Promise数组，等待全部请求完成后再更新photos状态：

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);
        // 生成所有图片请求的Promise数组，只保留返回的Base64数据
        const imagePromises = data.map(item => 
            axios.get(`/api/user/private/readimage/${item.fileUrl}`,config)
            .then(res => res.data)
        );
        // 等待所有请求完成后更新状态
        Promise.all(imagePromises)
        .then(imageDataList => {
            setPhotos(imageDataList);
        })
        .catch(err => {
            console.error('加载图片失败:', err);
        });
    })
    .catch(err => {
        console.error('获取相册列表失败:', err);
    });
},[])

步骤2：修复图片渲染的条件判断 #

渲染时确保只有拿到有效Base64数据才生成图片链接，同时添加加载状态提示：

{album.length>0 && album.map((data,ind)=>{
    const base64Image = photos[ind];
    return(
        <div key={ind}>
            <div className='album-card-1'>
                {base64Image ? (
                    <img 
                        className="album-card-img" 
                        src={`data:image/jpg;base64, ${base64Image}`} 
                        onClick={()=>{ navigate(`/artist/${id}/user/album/${data._id}`) }}
                    />
                ) : (
                    // 自定义加载占位符，可替换为组件或图标
                    <div className="image-loading">加载中...</div>
                )}
            </div>
        </div>
    )
})}

额外检查建议 #

• 验证后端返回的Base64数据有效性：复制console.log(res.data)的内容，直接在浏览器地址栏输入data:image/jpg;base64, [复制的Base64内容]，确认能否正常显示图片，排除后端数据本身的问题。
• 增加错误兜底：如果图片请求失败，可显示默认占位图，提升用户体验。

内容的提问来源于stack exchange，提问作者user16852130