上传后条纹产品图片不显示

Question

我通过代码上传的Stripe产品的图像不显示，看起来它尝试加载图像（因为发生了加载效果），但随后图像不显示。我使用 Firebase Firestore (FF) 和 Firebase Storage (FS) 来保存产品和图像，然后从 FS 获取 downloadURL，并将其传递到图像数组中的 Stripe。上传到 Stripe 的所有其他信息（即价格、产品名称）在 Stripe 仪表板中正确显示。我已经联系了 Stripe 支持，他们表示最有可能的情况是 FS 不允许访问图像。我已经更改了 FS 中的安全规则以允许所有读取，因此我无法理解为什么 Stripe 无法访问该图像。

首先，我通过 FileReader 和 data_url 上传图像，但我认为这可能会导致问题，并切换到仅上传 .png 文件，而不通过 FileReader 运行它。

代码： dmin\shop\page.tsx

...
const addImage = (e) => {
        setSelectedFile(e.target.files[0]);
};

const createProduct = async (e) => {
        e.preventDefault();
        const productData = { // Dummy test data
            id: prodId,
            heading: 'Apple',
            subheading: 'Apples are very healthy',
            text: 'This is a new product being added to firestore',
            price: '499',
        };

        const docRef = await addDoc(collection(db, 'products'), productData);

        const imageRef = ref(storage, `products/${docRef.id}/image`);

        if (selectedFile) {         
            await uploadBytes(imageRef, selectedFile).then(async () => {
                const downloadURL = await getDownloadURL(imageRef);
                await updateDoc(doc(db, 'products', docRef.id), {
                    imageUrl: downloadURL,
                });
            });
        }

        const downloadURLCreated = await getDownloadURL(imageRef);

        const productCreate = await axios.post(
            '/api/createProduct',
            {
                prodData: productData,
                prodId: docRef.id,
                prodImgUrl: downloadURLCreated,
            },
            {
                headers: {
                    'Content-Type': 'application/json',
                    Accept: 'image/png',
                },
            }
        );
};

/api/createProduct/route.tsx

export async function POST(request) {
    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, { apiVersion: '2022-11-15' });

    let data = await request.json();

    const { prodData, prodId, prodImgUrl } = data;

    const product = await stripe.products.create({
        id: `${prodId}`,
        active: true,
        name: `${prodData.heading}`,
        description: `${prodData.subheading}`,
        default_price_data: {
            currency: 'gbp',
            unit_amount_decimal: `${prodData.price}`,
        },
        images: [`${prodImgUrl}`],
    });

    return NextResponse.json(data);
}

我从 Stripe 收到状态 200 响应，其中包含 FS 图像的正确 url。如前所述，Stripe 认为我以正确的方式发出请求，所以它一定与 FS 访问有关？我很困惑，正在考虑使用 Cloudinary 之类的东西来托管图像，但这进一步扩展了我的应用程序的依赖关系，我宁愿只使用 Firebase 进行存储。

任何帮助/建议将不胜感激。

Answer 1

虽然我不会修复您的代码，但我会向您提供我通过 API 以编程方式将图片添加到条纹产品中所做的工作。

您必须使用他们的文件上传 API 创建一个具有产品图片目的的文件。

然后拉出文件列表，使用 FileLink 创建一个具有未经身份验证访问权限的可用链接。现在在您的产品创建代码中使用该链接。瓦拉。