Help with using pictures/photos in lists & tables

[rossiai]

In the past, I have created some apps that use lists containing photos. The lists come from tables that I have also created myself inside Code.org.

Up until now, I have used pictures from either Unsplash or Pexels. So, the tables have several columns and one of them is for pictures. You are required to use the links to the picture. The links should be inside quotation marks, since they are strings.

This time, instead of using pictures from Unsplash or Pexels, I wanted to use my own pictures. I created a folder in my Google Drive, and dropped all of the images. They are PNGs. and the sharing settings are so “anyone with the link can view”.

When I run the app, I am able to see all of the pictures that come from the mentioned websites, but the pictures that come from my drive do not show up. I only see a broken link.

So. my question is. Where should I store the pictures so they can be used in an app? What type of link do I need?

The link to the picture that doesn’t show is: plant2.png - Google Drive

Thank you so much,

[rossiai]

Hi. I got it!

In Code.org, we can only use links to pictures hosted on the web. If your pictures are in your Google Drive, you have a problem. And I need to use clipart that it is stored in my Google Drive.

Mori, on stackoverflow, shared a way to fix the links to images stored in Google Drives, so they can be used as if they were hosted on the web.

In my table, instead of using:

I now have:

It works! You need to get the shareable link to your picture, isolate the file ID (blue color in the picture), and add the following line in front of it: https://drive.google.com/uc?id=

The links are in between quotation marks because you need to use strings in your table.

This is the solution. This screenshot comes from stackoverflow. Find link here.

[letti42]

I’m glad you got it working, Google Drive is always a pain to work with trying to get the actual file!