react-protected-src

Use custom headers in <img> src attribute easily. With this hook you can use custom headers (e.g. JWT token) directly in src without worrying about the extra steps, and then you get your clean code.

1. Installation:

npm i react-protected-src

or with yarn:

yarn add react-protected-src

2. Import:

import {useProtectedSrc} from "react-protected-src";

3. Usage:

export function Page() {
    const base64 = useProtectedSrc('http://example.com/image.jpg', {'Authorization': 'Bearer SOME_TOKEN'})
    return (
        <div>
            <img src={base64} />
        </div>
    )
}

nextJS example:

export default function Home() {
    const base64 = useProtectedSrc('http://example.com/image.jpg', {'Authorization': 'Bearer SOME_TOKEN'})
    return (
        <div>
            <Image src={base64} width={100} height={100} />
        </div>
    )
}