Next.js 10版内置Image组件无法加载

Posted 2023-03-06

【中文标题】Next.js 10版内置Image组件无法加载

【英文标题】：Built-in Image component in Next.js version 10 can't be loaded

【发布时间】：2021-02-12 07:50:58

【问题描述】：

我正在尝试使用新的内置 Image 组件将图像插入到我的 Next.js v.10 应用程序中。

代码如下：

import * as React from "react";
import Image from "next/image";

export const TestImage = () => 
  return (
    <Image
      src="/images/dummy-rectangle-image.png"
      
      unsized
    />
  );
;

我的图片位于public/static/images 文件夹中。

next.config.js:

const withPlugins = require("next-compose-plugins");
const withCSS = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const withBundleAnalyzer = require("@next/bundle-analyzer");
const nextRuntimeDotenv = require("next-runtime-dotenv");

const withConfig = nextRuntimeDotenv( public: ["API_URL", "API_KEY"] );

const nextConfig = 
    analyzeServer: ["server", "both"].includes(process.env.BUNDLE_ANALYZE),
    analyzeBrowser: ["browser", "both"].includes(process.env.BUNDLE_ANALYZE),
    bundleAnalyzerConfig: 
        server: 
            analyzerMode: "static",
            reportFilename: "../bundles/server.html",
        ,
        browser: 
            analyzerMode: "static",
            reportFilename: "../bundles/client.html",
        ,
    ,
    publicRuntimeConfig: 
        PROXY_MODE: process.env.PROXY_MODE,
        API_URL: process.env.API_URL,
        API_KEY: process.env.API_KEY,
        STATIC_PATH: process.env.STATIC_PATH,
    ,
;

module.exports = withConfig(
    withPlugins([[withCSS], [withSass], [withBundleAnalyzer]], nextConfig)
);

结果：

请求网址： localhost:3000/_next/image?url=%2Fimages%2Fblack-arrow.png&w=768&q=75

状态码：500 内部服务器错误

Next.js 配置似乎有问题，无法识别图像的正确路径。我阅读了文档提示，但在我的情况下似乎没有任何帮助。

Next.js v.10中Image组件的正确使用方法是什么？

【参考方案1】：

如果您的图像位于public/static/images 文件夹中，那么您的<Image /> 组件的src 必须为src="/static/images/image-name.png"。这是因为公用文件夹中的任何内容都是直接提供的，包括目录。