This is my API endpoint
https://comfy-store.directus.app/items/products/
which contains the data I need title, price, image

From react I can access title, price no problem but for image I am getting:

"{"errors":[{"message":"You don't have permission to access this.","extensions":{"code":"FORBIDDEN"}}]}"
<img
   src={"https://comfy-store.directus.app/items/assets/" + image}/> 

From another question on here I think I need to add an access token to the src to access the image.

Steps to use the Directus CMS API

Tried using the token from thread above:

https://comfy-store.directus.app/public/item/products?access_token=BGJFwQ1KlHnH91V2oIwMb34343G but get
{"errors":[{"message":"Invalid user credentials.","extensions":{"code":"INVALID_CREDENTIALS"}}]}

Can anyone tell me how I can get the access token from Directus I can’t find it.

const ProductsGrid = () => {
    const { products } = useLoaderData();
    const data = products.data
   

    // const directusApi = 'https://comfy-store.directus.app/items/products/';
    // const fileId = image;
    // const accessToken = 'your-access-token';

    // const imageUrl = `${directusApi}/assets/${fileId}?access_token=${accessToken}`;
    // console.log(imageUrl);

    return (
        <div className='pt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3 '>
            {data.map((product) => {
                const { title, description, image, price } = product;
                return (
                    <Link
                        key={product.id}
                        to={`/products/${product.id}`}
                        className='card w-full  shadow-xl hover:shadow-2xl transition duration-300 '
                    >
                        <figure className='px-4 pt-4'>
                            <img
                                src={"https://comfy-store.directus.app/items/assets/" + image}
                                alt={title}
                                className='rounded-xl h-64 md:h-48 w-full object-cover'
                            />
                        </figure>
                        <div className='card-body items-center text-center'>
                            <h2 className='card-title capitalize tracking-wider'>{title}</h2>
                            <span className='text-secondary'>${price}</span>

                        </div>
                    </Link>

                );
            })}
        </div>
    );
};
export default ProductsGrid;