我有一个NextJS应用程序,我正在工作,我正在使用新的next/image
组件进行自动优化。我正试图设置我的本地开发环境,以便能够从本地Minio服务提供图像。整个本地应用通过docker-compose运行。
我的问题是,当我从Next尝试从Minio下载图像时,我得到一个错误,我不知道为什么。
下面是我得到的错误:
app_1 | FetchError: request to http://s3:9000/app-development/d5fc7f6b2d993e0e0eec8e2a2f4d3a50-image.jpeg failed, reason: connect ECONNREFUSED 127.0.0.1:9000
app_1 | at ClientRequest.<anonymous> (/usr/src/app/node_modules/node-fetch/lib/index.js:1461:11)
app_1 | at ClientRequest.emit (events.js:314:20)
app_1 | at Socket.socketErrorListener (_http_client.js:427:9)
app_1 | at Socket.emit (events.js:314:20)
app_1 | at emitErrorNT (internal/streams/destroy.js:92:8)
app_1 | at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
app_1 | at processTicksAndRejections (internal/process/task_queues.js:84:21) {
app_1 | type: 'system',
app_1 | errno: 'ECONNREFUSED',
app_1 | code: 'ECONNREFUSED'
app_1 | }
我知道我已经用Minio正确设置了一切,因为如果我在浏览器中打开一个简单的HTML文件,我的图像显示得很好,就像这样:
<!DOCTYPE html>
<html>
<body>
<img src="http://s3:9000/app-development/d5fc7f6b2d993e0e0eec8e2a2f4d3a50-image.jpeg" />
</body>
</html>
我不知道下一步该做什么。任何帮助将非常感激!
编辑:我刚刚想起/意识到我的NextJS应用程序是通过一个完全独立的docker/docker-compose设置在本地运行的。我想知道这是否是NextJS应用程序从自己的容器内努力访问localhost
或s3
服务的问题…
你可能需要在你的下一个js项目中添加你想从next .js图像优化API中服务的图像提供程序域。
在你的下一个项目的根目录下有一个名为'next.config.js'的配置文件。更新该文件并添加域,如下所示:https://nextjs.org/docs/api-reference/next/image#domains——为了保护你的应用程序免受恶意用户的攻击,你必须定义一个你希望从Next.js图像优化API提供服务的图像提供程序域列表。这是用next.config.js文件中的domains属性配置的,如下所示:
module.exports = {
images: {
domains: ['s3:9000', '<other_domains>'],
},
}
这个链接也可以帮助你:Nextjs image docs