Error while loading images from URLs: "Exception: Failed to load media (probably due to a cross-origin URL)"

Anvil Q&A
1

I have a JSON file with image URLs, and I am trying to load the images into an Anvil table.

Here is a reduced example trying to load images of dresses. I unsuccessfully attempted to load the images with:

Client side

for row in rows_data:
  dresses['image'] = anvil.URLMedia(row['ImageUrl'])
  print('client')
  anvil.server.call('add_dress', dresses)

Server side

@anvil.server.callable
def add_dress(dress_dict):

  print('server')
  app_tables.dresses.add_row(
    created = datetime.now(),
    **dress_dict
  )

Output

client
Exception: Failed to load media (probably due to a cross-origin URL): http://storage.googleapis.com/ebimages/141984_Sky165

My table is named “dresses” and has a column “image”.
I don’t know much about cross-origin URLs besides what I read in the last 15 minutes. However, Google didn’t point me in any helpful directions.

Exploring Media Objects, I also tried

dresses['image'] = Image(source = row['ImageUrl']).source

with the same result.

Is there anything I can add to load the images through these URLs? Is it something inherent to my URL (I do not have direct access to the images besides the storage.googleapis links - the example above has one of these links)?

Or is there a workaround? Basically, I am trying to flip through the data table of images and display one image at a time on the dashboard.

Thanks!

2

Hi @gweber.lauraandleigh,

Rather than storing URLs in your Data Tables, it might be simpler to first create Media Objects for each of your image URLs, and store these Media Objects directly in your Data Tables.

Constructing Media Objects from URLs should be done on the server-side. This is because it is often not possible to fetch the data from a URLMedia Object in client-side code (due to browser security restrictions). Send your JSON file to the server and use a server function to process the URLs and store each image in your Data Table.

Your server function for loading the images from their URLs and storing them in your Data Tables could look something like this:

# Create a URLMedia object from your image url
urlMedia = anvil.URLMedia(<your-url-here>)
# Create a JPG Media Object with the data from your URLMedia object
image = anvil.BlobMedia(content_type="image/jpg", content=urlMedia.get_bytes(), name="dress1")
# Add a row to your 'images' Data Table (which has a `Media` type column called 'image')
app_tables.images.add_row(name='dress1', image=image)

It should then be straightforward to display these images on your dashboard, for example:

# Display image 'dress1' in your app
self.image_1.source = app_tables.images.get(name='dress1')

Anvil Docs | Files, Media Objects and Binary Data

3 Likes
3

Perfect! Thanks @bridget. I got it working by following your example and your link (which was pretty much exactly what I needed to see). I think I misunderstood what a URLMedia Object was and also that this should be done server side.

1 Like