0

How do we handle and convert into base64, if we receive image with path in React Hook in following format: 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>
soccerway
  • 10,371
  • 19
  • 67
  • 132
  • refer this:https://stackoverflow.com/questions/22172604/convert-image-url-to-base64 – Jing Jiang Jun 18 '20 at 07:32
  • @JingJiang Not working Jing, I have tried many options. – soccerway Jun 18 '20 at 12:53
  • `function base64Encode(file) { var body = fs.readFileSync(file); return body.toString('base64'); } useEffect(() => { if (loginPhoto.photo) { var base64String = base64Encode(loginPhoto.photo); setLoginImgSrc(base64String); localStorage.setItem("loginImage", base64String); } }, [loginPhoto.photo]) var loginUserImg = localStorage.getItem('loginImage');` – soccerway Jun 18 '20 at 12:57
  • The most recent image to base64 is the above one. I have no error, but still image is not displaying – soccerway Jun 18 '20 at 12:59

0 Answers0