无法使用 React 来使用 Directus 中的图像

Question

这是我的 api 端点 https://comfy-store.directus.app/items/products/ 其中包含我需要的数据标题、价格、图片

从反应中我可以访问标题，价格没问题，但对于我得到的图像 "{"errors":[{"message":"您无权访问此内容。","extensions":{"code":"FORBIDDEN"}}]}"

从这里的另一个问题我认为我需要向 src 添加访问令牌才能访问图像

使用 Directus CMS API 的步骤

尝试使用上面的令牌 https://comfy-store.directus.app/public/item/products?access_token=BGJFwQ1KlHnH91V2oIwMb34343G但是得到 {"errors":[{"message":"用户凭据无效。","extensions":{"code":"INVALID_CREDENTIALS"}}]}

谁能告诉我如何从 Directus 获取访问令牌，我找不到它。

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; 

Answer 1

来自快速入门指南

创建并登录您的 Directus 云帐户

首次登录云账户时，您将 提示创建团队。每个 Directus 云项目都存在于 一个团队的范围。它们允许您组织团队成员， 根据需要进行项目和项目计费。

创建一个新项目

启动后，云项目大约需要 90 秒 来创建。在此期间，链接将发送到电子邮件 与您的云帐户关联。该电子邮件将包含您的 项目 URL 以及用于登录的电子邮件和密码。如果你用过 GitHub 创建您的帐户，这将是您的 GitHub 电子邮件。

访问您的新项目

使用电子邮件收件箱或手机上的 URL 登录到您的新项目 Directus 云仪表板。

拥有帐户访问仪表板并注册令牌后