How to display image from a local storage?

The project setup is they separate file migration where the the image url is stored either local or server.. in the edit component I want to display old image but I got error

edit:23 
        
        
        GET http://color-game-api.test/storage/local/host_photos/jJPxbvcfWybsi5sOsRZqNx2ytn7HKHklvNpb46ms.jpg 404 (Not Found)

this is the code

const props = defineProps({
    host: Object
});

console.log('Props', props.host)

const form = useForm({
    _method: 'PUT',
    // photo: null,
    photo: props.host?.data?.photo?.full_url ?? null,
    name: props.host?.data?.name ?? '',
    address: props.host?.data?.address ?? '',
    birthdate: props.host?.data?.birthdate ?? '',
    socmed_link: props.host?.data?.socmed_link ?? '',
    hobbies: props.host?.data?.hobbies ?? '',
    schedule: props.host?.data?.schedule ?? '',
    followers: props.host?.data?.followers ?? '',
});


const updatePhoto = (file) => {
    form.photo = file;
};

const photoPreviewUrl = computed(() => {
    // Check if form.photo is a File object or a string
    if (form.photo instanceof File) {
        return URL.createObjectURL(form.photo);
    } else if (typeof form.photo === 'string') {
        return form.photo; // Return the URL directly if it's already a string
    }
    return null;
});

const submit = () => {
    form.post(route('hosts.store'), {
        onError: error => console.error('submit', error)
    })
}

 <FormField label="Photo" :error="form.errors.photo">
                    <FormFilePicker v-model="form.photo" @update:modelValue="updatePhoto"
                        accept="image/png, image/jpeg, image/jpg" />
                </FormField>
                <div class="mt-2 block w-full">
                    <img :src="photoPreviewUrl" :alt="form.name" class="rounded-full h-20 w-20 object-cover" />
                </div>

and this is the console

Props 
Proxy(Object) {data: {…}}
[[Handler]]
: 
MutableReactiveHandler
[[Target]]
: 
Object
data
: 
address
: 
"Sibulan"
birthdate
: 
"1987-12-27"
can
: 
{create: false, edit: true, enable: false, disable: false}
file_id
: 
10
followers
: 
10000
hobbies
: 
"Eating while sleeping"
id
: 
2
is_active
: 
1
name
: 
"Emman the Tank"
photo
: 
disk
: 
"local"
extension
: 
"jpeg"
full_url
: 
"/storage/local/host_photos/jJPxbvcfWybsi5sOsRZqNx2ytn7HKHklvNpb46ms.jpg"
id
: 
10
name
: 
"zS9t5Vou"
path
: 
"local/host_photos/jJPxbvcfWybsi5sOsRZqNx2ytn7HKHklvNpb46ms.jpg"
size
: 
"12230"
thumbnail_path
: 
"local/images/thumbnails/jJPxbvcfWybsi5sOsRZqNx2ytn7HKHklvNpb46ms_thumb.png"
thumbnail_url
: 
"/storage/local/images/thumbnails/jJPxbvcfWybsi5sOsRZqNx2ytn7HKHklvNpb46ms_thumb.png"
type
: 
"image/jpeg"
uploader_id
: 
1
[[Prototype]]
: 
Object
schedule
: 
"Every MWF"
socmed_link
: 
"https:friendsher.emman"
[[Prototype]]
: 
Object
[[Prototype]]
: 
Object
[[IsRevoked]]
: 
false