2

我正在尝试使用新的内置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组件的正确使用方法是什么？

4

1 回答 1

1

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

于 2020-10-30T17:21:38.990 回答