Use remote and local images together with next/image - next.js

Question

I am trying to use next/image to load local images as well as remote images. I have my local images in public/assets/images and remote images in AWS S3. I want to use a placeholder image (from local) before uploading the image, and then after the upload, replace it with the remote image.
I have added 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)
But still, it proxies it with localhost and returns The requested resource isn't a valid image.
I tried adding path and loader along with domains in the config, but then it loads all the images from the given path, be it remote or local.
I can use the img tag for it but I wish to use next/image for image optimization. Is it possible?

Answer 1

I just ran into this problem and this is how I solved it. In your project's next.config.js file, add the list of domains where your site may be pulling images from. This would include localhost, the domain your site is on when deployed, and an external site. Then set the loader to custom.
// next.config.js
module.exports = {
images: {
domains: ['localhost', 'yourdomain.com', 'externaldomain.com'],
loader: 'custom'
}
}
Then in your code, for each image make sure you set the loader attribute and the correct src. Then for your local images set up your custom loader this way.
<Image loader={({src}) => src} src="/logo.png" layout="fill" />
Thank you to Hughes' above comment and the issue they linked for helping me figure this out.