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

【问题标题】：Built-in Image component in Next.js version 10 can't be loadedNext.js 10版内置Image组件无法加载
【发布时间】：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"
      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)
);

结果：

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

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

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

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

【问题讨论】：

标签： next.js nextjs-image

【解决方案1】：

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

【讨论】：