I am experiencing the error in the title and am having trouble resolving it.

The images are placed in /public/images/404.webp and this error is occurring on the page where I rewrite path from the middleware.

The requested resource isn't a valid image for /images/404.webp received text/html; charset=utf-8
ImageError: The requested resource isn't a valid image.
    at imageOptimizer (xxxxxxx\node_modules\.pnpm\next@13.2.4_react-dom@18.3.0-canary-ce6842d8f-20230610_react@18.3.0-canary-ce6842d8f-20230610\node_modules\next\dist\server\image-optimizer.js:515:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async cacheEntry.imageResponseCache.get.incrementalCache (xxxxxxx\node_modules\.pnpm\next@13.2.4_react-dom@18.3.0-canary-ce6842d8f-20230610_react@18.3.0-canary-ce6842d8f-20230610\node_modules\next\dist\server\next-server.js:264:72)
    at async xxxxxxx\node_modules\.pnpm\next@13.2.4_react-dom@18.3.0-canary-ce6842d8f-20230610_react@18.3.0-canary-ce6842d8f-20230610\node_modules\next\dist\server\response-cache\index.js:83:36 {
  statusCode: 400

I am a newbie to edge, middleware, etc., so I would be very happy if you could give me some peripheral knowledge and some helpful websites.