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?
