how can configure next.config.js to allow image from internet to be shown in our web page in next js version 13.*.
I have tried these code but again shows this error;
Error: Invalid src prop (https://lh3.googleusercontent.com/a/ACg8ocKmJC1nmylcAXR0-pyi5Zh7sQMAbhLNAiY1KwgG2U6N=s96-c) on next/image
, hostname "lh3.googleusercontent.com" is not configured under images in your next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
appDir: true,
experiments: {
topLevelAwait: true,
},
serverComponentsExternalPackages: ["mongoose"],
},
images: {
formats: ['image/avif', 'image/webp'],
remotePatterns: [
{
protocol: 'https',
hostname: 'lh3.googleusercontent.com',
port: '',
pathname: '/**/**',
},
],
},
webpack(config) {
return config;
},
i18n: {
locales: ["en", "fa"],
defaultLocale: "en",
localeDetection: false,
},
};
const withNextIntl = require("next-intl/plugin")("./i18n.js");
module.exports = withNextIntl({
nextConfig,
});
Try this: