FirebaseError: Firebase Storage: Invalid URL for image urls set through firestore

[faizanabidnaqvi]

If an entity has an image url set in the database that is not from the same firebase project and the field uses the 'storage' config, the image doesn't load in collection view and gives this error in the console:
FirebaseError: Firebase Storage: Invalid URL

For example, if an image field is set this way:

main_image: buildProperty({
            name: "Image",
            dataType: "string",
            storage: {
                storagePath: "images",
                acceptedFiles: ["image/*"],
                storeUrl: true,
            }
        }),

Now if we upload an image through firecms itself, the image preview shows fine in collection view.

However, now if I manually set the main_image to another link (not a firebase storage link or not a storage link from the same storage bucket e.g. https//abc.com/abc.png) directly through firestore, the image preview does not load and gives the error.

While this might not seem like a common scenario, it does occur if I am using the firebase emulator that contains image fields linked to a live project's storage rather than local storage.

[VisetDev]

maybe related:
you have to set type on your file. In my case "image/jepg"