Image Field Preview: Cors required for edit but not detail

[stuartcusackie]

• Laravel Version: 9.50.2
• Nova Version: 4.21.0
• PHP Version: 8.1.12

Description:

This is not a major issue at all and easy to fixed by adding GET * to my DO Spaces CORS configuration. It seems like a bug but I might be wrong.

Image field previews are not showing in Resource Edit view when using DO Spaces - unless you set the CORS config as described above. I find this weird because image field previews work perfectly fine in Resource Detail view.

Screenshot 1 (Detail mode - preview image visible):

Screenshot 2 (Edit mode - preview image not visible - It should be above the blue button):

I can see CORS errors when I go to edit mode:

but everything is fine in detail mode. Weird because they fetch the exact same url!

My Image field configuration is unusual because it integrates with Spatie's Media Libary, but I don't think this is the problem. As mentioned, everything works when using the local disk, and detail mode works fine with remote disks.

Possible cause

I guess the detail view is fetching the image in a different way to the edit view. I checked Chrome's network tab to compare the requests. The edit mode is adding the domain name to the origin, whereas detail mode has no origin:

Edit Mode ('origin' causing the problem?):

Preivew Mode (No origin - preview image works!)

[crynobone]

Hi there,

The detail and edit page doesn't use the same Vue component code to preview the image which introduces the differences here. In order to support previewing stored images and previewing selected images from the local disk we are using URL.createObjectURL() which could be the cause of requiring origin.

I believe setting the correct CORS for cloud storage is the way to go here.

[stuartcusackie]

That makes perfect sense. Thanks for the explanation.