如何配置 next.config.js 以允许来自互联网的图像在 next js 版本 13.* 中显示在我们的网页中。
我已经尝试过这些代码,但再次显示此错误;
错误: next/image
上的 src 属性 (
https://lh3.googleusercontent.com/a/ACg8ocKmJC1nmylcAXR0-pyi5Zh7sQMAbhLNAiY1KwgG2U6N=s96-c) 无效,主机名“lh3.googleusercontent.com”未在您的
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,
});
试试这个:
{
protocol: "https",
hostname: "lh3.googleusercontent.com",
port: "",
pathname: '/*/**',
},