如何允许所有域进行Image nextjs配置？

amrnrhlw 于 2023-01-08 发布在其他

关注(0)|答案(2)|浏览(175)

我有各种各样的图像网址和变化随着时间的推移（图像是采取的网址为网络，而不是本地或从一个私人存储）。为了呈现<Image />标签，域应该传递到nextjs配置。这是不可能的传递在100的网址随着时间的推移。
如何允许所有域？

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: [
      "img.etimg.com",
      "assets.vogue.com",
      "m.media-amazon.com",
      "upload.wikimedia.org",
    ],
  },
};

module.exports = nextConfig;

我试过了，但是没用，"*.com"

next.js

来源：https://stackoverflow.com/questions/71235874/how-to-allow-all-domains-for-image-nextjs-config

2条答案

按热度按时间

tv6aics11#

它为我工作，相应的next.js文档：

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      },
    ],
  },
};

next.js远程模式

赞(0）回复(0）举报 2023-01-08

agyaoht72#

根据其文档，域必须明确
为了保护您的应用程序免受恶意用户的攻击，您必须定义一个希望从Next.js Image Optimization API获得服务的图像提供程序域的列表。
您还可以看到，源代码允许对url进行评估，不接受通配符。
https://github.com/vercel/next.js/blob/canary/packages/next/client/image.tsx#L864

求解

您应该查看cloudinary或imgix等代理，并允许next.config中的这些域使用其fetch功能加载外部映像。
即
将cloudinary作为允许的域

module.exports = {
  images: {
    domains: ['res.cloudinary.com'],
  },
};

然后在代码中

<Image
src="https://res.cloudinary.com/demo/image/fetch/https://a.travel-assets.com/mad-service/header/takeover/expedia_marquee_refresh.jpg"
width={500}
height={500}
/>

- 重要**

The following StackBlitz utilizes their demo account to fetch an external image from Expedia.com, you should get your own account for production.
https://stackblitz.com/edit/nextjs-pxrg99?file=pages%2Findex.js

赞(0）回复(0）举报 2023-01-08

我来回答

如何允许所有域进行Image nextjs配置？

2条答案

求解

相关问题

热门标签

最新问答