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

Question

有没有在 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

Answer 1

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

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

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

第二：传入图像特殊加载器，这可能非常简单

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

它应该看起来像：

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

Answer 2

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

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

//later to use

<Image loader={customImgLoader} alt="Avatar" width=64 height=64 src={avatarUrl} />

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