带有 next.js 的 Blob 图像 URL 不起作用

Posted 2023-03-06

【中文标题】带有 next.js 的 Blob 图像 URL 不起作用

【英文标题】：Blob images urls with next.js doesn't work

【发布时间】：2021-07-12 07:11:45

【问题描述】：

有没有在 next.js 中使用 blob 的解决方案？以前我使用 img 和 blob URL 效果很好，但现在当我尝试使用 Image 组件时 blob url 不起作用。

我尝试将 blob 添加到域：

domains: ['softflixprodstorage.blob.core.windows.net']

但我收到错误表单服务器，因为下一个图像生成该请求 URL：

Request URL: http://localhost:3000/_next/image?url=https%3A%2F%2Fsoftflixprodstorage.blob.core.windows.net%2Fproduct-covers%2FWindows-10-Pro.webp&w=375&q=75

而不是：

Request URL: https://softflixprodstorage.blob.core.windows.net/product-covers/Microsoft-Office-2019-Professional.webp

【问题讨论】：

嗨，欢迎来到 SO！避免发布（链接到）图像！改为以文本格式发布您的代码和错误

Blob URL 目前是not supported by next/image。

【参考方案1】：

我找到了你需要做的事情的答案

首先：将您的 blob api 添加到您的域

domains: ['softflixprodstorage.blob.core.windows.net']

第二个：传入图片的特殊加载器，非常简单

const loader = ()=> imgUrl (From blob api)

它应该看起来像：

<Image src=imgUrl loader=loader ...otherProps />

【参考方案2】：

我目前的解决方案是创建一个自定义加载器：

const customImgLoader = ( src ) => 
    return `$src`


//later to use

<Image loader=customImgLoader  width=64 height=64 src=avatarUrl />

我们告诉 next/image 原样返回 src