Next js images错误:"Next/image"上的src道具无效

Question

我在next.js中遇到以下错误，我是初学者，无法理解这个问题，有人能帮忙吗？

我找不到我需要做什么来解决这个问题，我已经尝试了很多事情，但仍然有同样的错误。

我得到的错误：

Server Error
Error: Invalid src prop (blob:http://localhost:3000/850a9a8b-591d-42f9-8d9d-8bb3e6c7cd94) on `next/image`, hostname "" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
src/pages/_document.js (12:8) @ Object.ctx.renderPage
10 | try {
11 |   ctx.renderPage = () =>
> 12 |     originalRenderPage({
|    ^
13 |       enhanceApp: (App) => (props) =>
14 |         sheet.collectStyles(<App {...props} />),
15 |     });
Call Stack
Function.getInitialProps
src/pages/_document.js (17:33)

我的下一个config.js文件：

const withPlugins = require('next-compose-plugins');
const withImages = require('next-images');
const nextConfig = {
target: 'serverless',
future: {
webpack5: true,
},
images: {
domains: ['http://localhost'],
},
};
module.exports = withPlugins([[withImages]], nextConfig);

我使用的组件图像：

{
releasesData.slice(0, 5).map((release) => (
<ContainerSpotifyCardsContent>
<Image
src={release.image}
alt={`Pra cego ver: Capa do ${release.tags} ${release.music}`}
width={90}
height={90}
layout="responsive"
/>
<div className="textContent">
<span className="songName">{release.music}</span>
<span className="bandName">{release.artist}</span>
<span className="styleName">{release.tags}</span>
<div className="typeContent">
<span>{release.type}</span>
<a href={release.links} target="_blank" rel="noopener noreferrer">
{SpotifyComponent("#000")}
</a>
</div>
</div>
</ContainerSpotifyCardsContent>
));
}

my_document.js文件：

import React from 'react';
import Document from 'next/document';
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
}

Answer 1

我刚刚解决了这个问题。next.config.js文件是在错误的目录中创建的，所以我只是把它放在了项目的主文件夹中。

我希望它能帮助一些人，因为我在多个来源上看到了这个错误，但没有正确的解决方案。。。

Answer 2

对于Next.js 13在next.config.js添加图像url详细信息

module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: '**.example.com',
},
],
},
}

参考：https://nextjs.org/docs/pages/api-reference/components/image-legacy#configuration-选项