Using next image component with s3 image: "url" parameter is valid

Question

Using next image component with s3 image: "url" parameter is valid

but upstream response is invalid

code:
<Image

fill
src={school?.heroImage? school?.heroImage:"/assets/img/home-5/masthead/bg.svg"}
alt="image"
/>

request:

General:
Request URL:
http://future.localhost.com/_next/image?url=https%3A%2F%2Fweb.s3.me-central-1.amazonaws.com%2Ffuture%2Fuploads%2F1713425486678-vecteezy_woman-student-holding-book-in-her-hand-and-study-back-to_3492180.jpg&w=3840&q=75
Request Method:
GET
Status Code:
403 Forbidden
Remote Address:
127.0.0.1:80
Referrer Policy:
strict-origin-when-cross-origin

response header:
Connection:
keep-alive
Date:
Sat, 27 Apr 2024 17:06:27 GMT
Server:
nginx/1.25.4
Transfer-Encoding:
chunked

request header:
Accept:
image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
Accept-Encoding:
gzip, deflate
Accept-Language:
en-US,en;q=0.9
Connection:
keep-alive
Cookie:
_ga=GA1.1.1196622883.1710766529; _ga_S8GKSDQHS7=GS1.1.1714236699.7.1.1714237586.0.0.0
Host:
future.localhost.com
Referer:
http://future.localhost.com/
User-Agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

S3 policy:

{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadForImages",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::web/*",
"Condition": {
"StringLike": {
"aws:Referer": [
"http://*.localhost.com/*",
"http://future.localhost.com/"
]
}
}
}
]
}

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
eslint: {
ignoreDuringBuilds: true,
},

images: {
remotePatterns: [
{
protocol: "https",
hostname: "images.unsplash.com",
},
{
protocol: "https",
hostname: "placehold.co",
},
{
protocol: "https",
hostname: "web.s3.me-central-1.amazonaws.com",
},
{
protocol: "http",
hostname: "*.localhost.com",
},

],
},
};

module.exports = nextConfig;