My application works and the images show up just fine. The issue is in JS console I am seeing (edge/safari) browser):

2 requests
175 kB transferred
174 kB resources
Finish: 358 ms
DOMContentLoaded: 346 ms
Load: 347 ms
Request URL:
https://myapp.com/images/wtN6YCvAsuEyfXFNWV2UuSJBkQBxsUsfC5HCz1KO.jpg
Request Method:
GET
Status Code:
404 Not Found
Remote Address:
127.0.0.1:443
Referrer Policy:
strict-origin-when-cross-origin

I can copy paste https://myapp.com/images/wtN6YCvAsuEyfXFNWV2UuSJBkQBxsUsfC5HCz1KO.jpg into a new tab and it shows up fine (with the JS error of course).

I have of course recompiled assets etc and cleared cache. Even in incognito mode, it is doing the same.

My image gets displayed by:

    @foreach ($properties as $property)
       <div class="group relative bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-transform transform hover:scale-105">
        <img class="w-full h-48 object-cover" src="{{ url('images/' . $property->images->first()->path) }}" alt="{{ $property->name }}"
</div>
    
    @endforeach

My route

Route::get('/images/{filename}', [ImageController::class, 'streamImage'])->name('image.show');

My streamImage function:

public function streamImage($filename)
    {
        // Find the image by filename in the images collection
        $image = Image::where('path', $filename)->first();

        if (!$image) {
            abort(404); // Image not found
        }

        // Open GridFS stream (no need for a custom client)
        $gridfs = Storage::disk('gridfs');
        $stream = $gridfs->readStream($filename);

        // Stream the image as a response
        return Response::stream(function () use ($stream) {
            fpassthru($stream);
        }, 200, [
            'Content-Type' => $image->mime_type,
            'Content-Disposition' => 'inline; filename="' . $image->filename . '"',
        ]);
    }

Why am I getting JS errors?

UPDATE: This is only happening in local DDEV env. Not in prod.