无法加载 Next.js 版本 10 中的内置图像组件

Question

我正在尝试使用新的内置 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"
      alt="about"
      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)
);

结果：

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

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

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

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

Answer 1

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

无法加载 Next.js 版本 10 中的内置图像组件

Built-in Image component in Next.js version 10 can't be loaded

next.js

nextjs-image