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

Viewed 2856

I am trying to insert an image into my Next.js v.10 application using the new built-in Image component.

Here is the code:

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

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

My images are located in the public/static/images folder.

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)
);

Result:

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

Status Code: 500 Internal Server Error

It seems something is wrong with the Next.js configuration to recognize the right path to the image. I read documentation tips but seems nothing helps in my case.

What is the right way for the usage of Image component in Next.js v.10?

1 Answers

If your image is located in the public/static/images folder, then your <Image /> component needs to have an src of src="/static/images/image-name.png". This is because anything in the public folder is served directly, including directories.

Related