Error: The requested resource isn't a valid image for ...
- Dominant language
- TypeScript
- Stars
- 108
- Forks
- 12
- Avg merge
- 1h 30m
- Merged PRs (30d)
- 7
Description
When deploy `NextjsGlobalContainers` or `NextjsRegionalContainers`, image optimization is resulting in this error on server: `⨯ The requested resource isn't a valid image for /static/alexander-andrews-brAkTCdnhW8-unsplash.jpg received text/html; charset=utf-8`
It's not a permission issue because
```
Output: Image file is readable
Command: cat /mnt/cdk-nextjs/public/static/alexander-andrews-brAkTCdnhW8-unsplash.jpg > /dev/null && echo "Image file is readable" || echo "Cannot read image file"
```
packages/next/src/server/image-optimizer.ts
```
if (!upstreamType.startsWith('image/') || upstreamType.includes(',')) {
if (!opts.silent) {
Log.error(
"The requested resource isn't a valid image for",
href,
'received',
upstreamType
)
}
throw new ImageError(400, "The requested resource isn't a valid image.")
}
```
Need to debug in packages/next/src/server/lib/router-server.ts line 320 (`const handleRequest = async (handleIndex: number) => {`) to see why it's failing to read
Contributor guide
Research direction
Begin with packages/next/src/server/image-optimizer.ts and packages/next/src/server/lib/router-server.ts around line 320, then reproduce the failure in NextjsGlobalContainers or NextjsRegionalContainers using the reported image. Done means image optimization no longer receives text/html for a readable image and the deployment succeeds.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- aws, nextjs, typescript
- Domain
- backend, cloud
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100