将远程和本地图像与 next/image 一起使用

我正在尝试使用next/image加载本地图像以及远程图像。我有我的本地图像public/assets/images以及AWS S3中的远程图像。我想在上传图像之前使用占位符图像（来自本地），然后在上传后将其替换为远程图像。

我已经添加了domains in my next.config.js:

const withPlugins = require('next-compose-plugins')
const nextTranslate = require('next-translate')

const nextConfig = {
  ...
  images: {
    domains: ['xxx.amazonaws.com'],
  },
  ...
}
module.exports = withPlugins([nextTranslate], nextConfig)

但它仍然代理它localhost并返回The requested resource isn't a valid image.

我尝试添加path and loader随着domains在配置中，但随后它会从给定路径加载所有图像，无论是远程还是本地。

我可以使用img它的标签，但我希望使用 next/image 进行图像优化。是否可以？

我刚刚遇到了这个问题，这就是我解决它的方法。在你的项目中next.config.js文件中，添加您的站点可能从中提取图像的域列表。这将包括localhost、部署时您的站点所在的域以及外部站点。然后设置loader to custom.

// next.config.js

module.exports = {
  images: {
    domains: ['localhost', 'yourdomain.com', 'externaldomain.com'],
    loader: 'custom'
  }
}

然后在您的代码中，确保为每个图像设置了 loader 属性和正确的 src。然后，对于本地图像，以这种方式设置自定义加载程序。

<Image loader={({src}) => src} src="/logo.png" layout="fill" />

感谢休斯的帮助以上评论 https://stackoverflow.com/questions/67985068/use-remote-and-local-images-together-with-next-image#comment124530002_67985068和他们链接的问题 https://stackoverflow.com/questions/70429040/getting-public-image-asset-in-next-js-project-folder-when-loader-configuration-p帮助我解决这个问题。