reactjs - 我们如何处理带有文件路径的图像并在反应挂钩中转换为 base64

Question

image with path如果我们在 React Hook 中以以下格式 接收，我们如何处理并转换为 base64 ：images\photo-1592376542020.JPG

UserLoginProvider.js

import { UserProfileContext, UserLoginContext } from '../context';

const UserLoginProvider = ({children}) => {

    const [loginPhoto, setLoginPhoto] = useState({ photo:''});

     const value = useMemo(() => ({
        loginPhoto, setLoginPhoto
    }), [loginPhoto]);


    return (
       <UserLoginContext.Provider value={value}>
           {children}
       </UserLoginContext.Provider>
    )   
}
export default UserLoginProvider;

Navigation.js

const [loginImgSrc, setLoginImgSrc] = useState(null);
const { loginPhoto } = useContext(UserLoginContext);

// While doing console.log("Print here:"+loginPhoto);  displays [object object ] 
    useEffect(() => {
            if (loginPhoto.photo) {
            const reader = new FileReader();
            reader.addEventListener('load', () => {
               setLoginImgSrc(reader.result);
               console.log("LoginImage:"+reader.result);
               localStorage.setItem("loginImgData", reader.result);
            });
            reader.readAsDataURL(loginPhoto.photo);
            }
        }, [loginPhoto.photo])

        var loginImage = localStorage.getItem('loginImgData');

<span className="image_login_link"><img className="nav_profile" src={loginImage}></img></span>