How to display images using API

I’m new to API’s and am trying to pull some data from Airtable/Contentful. Am I able to pull images from these sources using API’s and display them in my app? I have tried to do this and am able to pull text-based data, but not images. Is there an easier/better way I should be going about this?

Hi Dylan,

If you’re using Airtable, you have to make sure the images you’re using are in your Base as URLs and not uploaded as Attachments. You can upload an image with the Attachment field type and then convert it to Single Line Text (example below).

Screen Shot 2020-11-06 at 8.58.31 AM

As for Contentful, I’d have to see what the endpoint you’re working with looks like. Are you using the same one you showed me the other day?

Thank you, Angela! I’m pretty sure that should resolve my issue. What is the best way to convert the attachment to Single Line Text? Can I do this through Airtable or do I need to use a third-party service?

Thank you, Angela! I found a resource for how to retrieve the base URL and add it to a Single Line Text column. My only issue now is that I cannot see this field as an option to choose from when selecting an “Image Source” in Draftbit. I can see the field show up when I refresh the GET API in Drafbit, it just does not show up when I try to select that field as a data source for an image list.

No problem! That’s strange – are you working in the same app you sent me the other day? I can go in there and take a look!

Actually it looks like I needed to update the API. I think I’m in business now. It looks like everything is working correctly!

1 Like

Glad everything is working now!

Now that I’ve figured out how to use the API to bring data into my app, I’m having difficulty passing data over to another screen. The data shows up under my Draftbit builder on the correct screens, but it does not show up correctly in Expo. I get the attached red error message. Any ideas on what to do to fix this?

Hey Dylan,

Sorry about this! I believe this is related to a known issue. It’ll take a bit of a time but the engineering team has a fix coming soon.

In the meantime, you can use a workaround by adding a blank Custom Function in the Custom Code menu and adding that Custom Function before the Navigate action (pictured below).



Please let me know if you need help doing this!

Thanks,
Angela

Thank you so much! This worked and now my app appears to be functioning correctly.

1 Like

No problem Dylan! I’ll let you know once the fix is out and you can remove the blank function.