Display an image returned by response()->file()

Hello,

I have some private images I need to display on the VueJS frontend.

I know that it's possible to create a symbolic link to access the folder from the public folder, but I don't want it because the image should not be accessed without authentication.

I have created a controller and a method to get an image from the storage/app/media folder and it returns response()->file($image).

But now I'm searching for hours how to display this image in the VueJS frontend.

const res = imageService.get('branch', branch.id, 'mini');

// res.data contains the image file content

How can I display this image ?

I just tried that.

<img class="w-4 h-4" :src="imageUrl" alt="">

...

const res = await imageService.get('branch', props.branch.id, 'mini');

const blob = new Blob([res.data]);

imageUrl.value = URL.createObjectURL(blob);

In this case, imageUrl.value has a content like blob:http://localhost/941ac0ab-1f96-4968-b4a1-8558caf6546f, but the image doesn't display.

Thanks for your help.

V