如何允许 Image nextjs 配置的所有域?

2024-03-31

我有各种图像网址并随着时间的推移而变化(图像是通过网址地址获取的,而不是本地或来自私人存储)。为了渲染<Image />tag 、域名应该传递给 nextjs 配置。 随着时间的推移,不可能传递数百个 url。

如何允许所有域?

/** @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 文档:

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

Next.js 配置选项 https://nextjs.org/docs/pages/api-reference/components/image#configuration-options

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何允许 Image nextjs 配置的所有域? 的相关文章

  • Next Js服务器端Api读写JSON

    我正在尝试使用 Next js 为自己编写一个基本的本地 api 它是一个时间线生成器 而我却陷入了实际从 api 文件夹中读取文件的困境 我想要在本地应用程序中得到什么 1 一个简单的页面 我可以在其中输入事件 以及日期和描述 2 在某处
  • 如何使用 API 路由在 Next.js 上下载文件

    我正在使用 next js 我有一个第三方服务 我需要从中检索 PDF 文件 该服务需要一个 API 密钥 我不想在客户端公开该密钥 这是我的文件 api getPDFFile js const options method GET enc
  • 重新渲染次数过多。 React 限制渲染数量以防止无限循环。下一个js错误

    有人可以解决这个问题吗 如果我删除 about 和 is 之前的 它不会抛出错误 smh import Navbar from components Navbar import Footer from components Footer i
  • Cookie 未存储在浏览器中

    与 一起工作Next js and Django Rest Framework 我正在使用 JWT 对用户进行身份验证 首先 当用户成功登录页面时 会将 cookie 包含 JWT 令牌 发送到浏览器 当用户尝试访问特定页面时 此 cook
  • next.js 环境变量未定义(Next.js 10.0.5)

    我正在使用 Next js 编写一个网站 并尝试添加谷歌标签管理器 我按照 Next js Github 示例上的教程进行操作 但由于某些原因我无法访问我的环境变量 它说我的变量未定义 我在项目文件夹中创建了一个文件 env local 与
  • Next.js 使用 SSR 的本地存储问题

    我有以下自定义挂钩 它将数据存储在本地存储中 import useCallback useEffect useState from react export const useLocalStorage key initialValue gt
  • 通过内联样式动态设置背景 Div 图像时不显示 | Next.Js

    我试图通过使用地图和外部 js 文件将图像存储为对象来从组件渲染图像 然后通过它们设置循环 将其设置为创建的每个 div 的不同背景图像 如果有意义的话 我将提供代码来更清楚地说明我想要完成的任务 在地图过程中 我试图定位对象方法 但我相信
  • 如何在不退出的情况下更新会话值?

    With NextAuth js https github com nextauthjs next auth 如何在不注销并再次登录的情况下更新会话对象内的值 例如 一旦用户登录 我就会使用会话中存储的 URL 来显示用户的头像 我还提供用
  • 如何在 NextJS 应用程序中处理公共和私有路由?

    我正在开发一个具有公共和管理路由的应用程序 在过去的 CRA 应用程序中 我们使用了自定义路由元素 但我们在 nextjs 中没有 Thins 我们有很多公共页面 我们有 20 个私人页面 路线 在 nextjs 中处理受保护的经过身份验证
  • Next 11 和添加脚本标签不起作用。没有渲染任何脚本

    我添加了我的谷歌标签管理器 app js文件 但它没有显示 我通过新的 脚本 标签加载的脚本都不起作用
  • 如何使用 next auth 通过自定义 Spring API 库和端点进行身份验证

    我是 Next js 的新手 正在将我的前端从 React 迁移到 Next v4 我已经使用 Spring 开发了一个后端 它连接到 Azure 上托管的 MySQL 数据库 该 API 在 Postman 和 React 前端上经过全面
  • NextjS src 和默认外部图像 URL 的图像问题

    我正在使用最新版本的 NextJS 10 0 9 我有一个想要显示的图像 但是收到错误 Error Image with src https picsum photos 480 270 must use width and height p
  • 如何仅在 NextJS 站点构建期间使用 getInitialProps?

    当使用 NextJS 构建静态站点时 我想要getInitialProps方法仅在构建步骤期间触发 而不是在客户端上触发 在构建步骤中 NextJS 运行getInitialProps 方法 https nextjs org docs fe
  • Next.js 嵌套动态文件夹路由

    Update 由于 category slug index js 导致此错误getServerSideProps 我尝试做index js在产品文件夹下 它可以工作 这意味着它可以与 category slug 一起使用getServerS
  • 如何在 NextJS 中设置 AWS-SDK 凭证

    我需要从 NextJs 应用程序将一些文件上传到 S3 由于它是服务器端 我的印象是简单地设置环境变量应该可以工作 但事实并非如此 我知道还有其他选择 例如为 EC2 分配角色 但我想使用 accessKeyID 和 SecretKey 这
  • Material UI + Nextjs:抽屉

    我在 React Nextjs 项目中遇到了 Material UI Drawer 的实现问题 问题是 当我在导航器中重新加载页面时 抽屉和应用栏的样式崩溃 当我重新加载服务器时 这种情况没有发生 仅在页面重新加载时发生 目前我不知道我必须
  • 如何在 next.js 中使用 window.matchMedia 和样式组件主题?

    我有一个主题 const smartPhonePortrait 320 const theme isCompact typeof window undefined window matchMedia min width smartPhone
  • 如何在 NextJS 中记录所有路由

    我对 NextJS 非常陌生 我目前有一个非常简单的应用程序 它提供少量页面 如果路由不存在 则返回 404 页面 我想记录每个请求 包括不存在的页面并返回 404 页面 我正在 docker 容器内运行该应用程序 或者我希望将日志写入标准
  • 如何在 Nextjs 中对 CSS 类名进行哈希处理?

    我怎样才能编辑localIdentName现场css loader在 Nextjs 的 Webpack 配置中 以便我可以散列 隐藏 混淆 css 类名 下面的例子来自 纽约时报 注意类名 此线程上的所有答案都不适用于较新的 Next js
  • 如何为 NextAuth.js 创建自定义 UI(使用 AWS Cognito)?

    是否可以为 AWS Cognito 提供自定义 UINextAuth js https next auth js org 当我使用 NextAuth js 调用 API 时 我看到这个 主观上丑陋的 屏幕 只有一个按钮可以将您重定向到真正的

随机推荐