Next.js v13从服务器获取图像错误

e0bqpujr  于 2023-01-20  发布在  其他
关注(0)|答案(1)|浏览(210)

我试图从服务器获取图像,但我总是遇到这个错误,下一个js无法读取URL,所以它可以显示页面内的图像,我尝试了许多解决方案在next.config.js文件,但它不工作这里是我做的解决方案,但它不工作

images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'localhost',
        port: '1337',
        pathname: 'localhost:1337/',
      },
    ],
  },

这是浏览器中的错误:
错误:next/image上的源属性(http://localhost:1337/images/aa.png)无效,您的next.config.js中的映像下未配置主机名“localhost”查看更多信息:https://nextjs.org/docs/messages/next-image-unconfigured-host
下面是我在next js page.js中的代码:

<Image src={(process.env.SERVER + cat.img).replaceAll(/\\/g, "/")} width={"200"} height={"200"}/>

env服务器只是localhost的url:1337/在next.config.js文件中,我如何从我的服务器渲染图像并将其显示在屏幕上?

bzzcjhmw

bzzcjhmw1#

你的远程模式定义了一个'https'主机,但是你使用的是带有'http'的src prop来加载镜像。我建议你更新为使用'http'协议:

images: {
    remotePatterns: [
      {
        protocol: 'http',
        hostname: 'localhost',
        port: '1337',
        pathname: 'localhost:1337/',
      },
    ],
  },

相关问题