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

【问题标题】：Blob images urls with next.js doesn't work带有 next.js 的 Blob 图像 URL 不起作用
【发布时间】：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。

标签： javascript reactjs next.js blob nextjs-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} alt="Avatar" width=64 height=64 src={avatarUrl} />

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

【讨论】：