javascript 如何在Next.js配置文件中为镜像添加多个主机名和路径名?

bqf10yzr  于 2023-03-21  发布在  Java
关注(0)|答案(1)|浏览(154)

我尝试从next/image的不同主机名导入多个镜像。我在next.confiq.js中尝试了这个:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: ['i.ibb.co', 'https://www.pexels.com/'],
        port: '',
        pathname: [
          '/x59q5zG/2560px-Airbnb-Logo-BC3-A9lo-svg.png',
          'search/travel/?orientation=landscape',
        ],
      },
    ],
  },
};

从单一主机名和路径名的单一图像是可以的。但当我尝试multilple它说:

Server Error
Error: Invalid src prop (https://i.ibb.co/x59q5zG/2560px-Airbnb-Logo-BC3-A9lo-svg.png) on `next/image`, hostname "i.ibb.co" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
zbwhf8kr

zbwhf8kr1#

不要尝试将hostname转换为数组。而是在remotePatterns中使用多个对象,每个域一个,作为示例,如下所示:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "i.ibb.co",
        // ...
      },
      {
        protocol: "https",
        hostname: "https://www.pexels.com/",
        // ...
      },
    ],
  },
};

相关问题