首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >下一个js图像错误:“Next /image`”上的src支柱无效

下一个js图像错误:“Next /image`”上的src支柱无效
EN

Stack Overflow用户
提问于 2021-05-17 01:49:43
回答 1查看 2K关注 0票数 1

我在next.js中有以下错误,我是初学者,我无法理解这个问题,有人能帮我吗?

我找不到我需要做什么来修复它,我已经尝试了很多事情,但仍然有相同的错误。

我得到的错误:

代码语言:javascript
运行
复制
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)

我的next.config.js文件:

代码语言:javascript
运行
复制
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);

我使用Image的组件部分:

代码语言:javascript
运行
复制
{
  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>
  ));
}

我的_document.js文件:

代码语言:javascript
运行
复制
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();
    }
  }
}
EN

回答 1

Stack Overflow用户

发布于 2022-01-03 22:56:54

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

我希望它能帮助到一些人,因为我在多个来源上看到了这个错误,没有适当的解决方案.

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/67563116

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档