Putting Image URL from retool database query into Image component

Hi all,

New to Retool and have a question. I've watched videos, looked at documentation, etc. but cannot find the answer.

I know how to take an image from a selected row in a table and populate an image component with that, but I do not know how to do that with an image URL from a query. Not sure if this question makes sense, but here are some screenshots

I tried to make it very simple by simply pulling a single image URL from column "DL_Image" from the original retool database table, but I just can't get that image URL to populate the Image component - and I need to be able to do this dynamically since I want to be able to reference whatever URL that query pulls.

Grateful for any help!


Hey @Jimmy,

You should be able to use the following syntax for that:
{{queryDriversLicense.data[0].DL_Image}} inside the "Image Source" box!

Thanks for reaching out! Here is the error message I get when trying that syntax:

"TypeError: Cannot read properties of undefined (reading 'DL_Image')" (attached screenshot)

Any additional advice?

^and I do have that second } hiding behind the pop over at the end there.

{{ queryDriversLicense.data.DL_Image[0] }} should work.

and heres the structure with more than 1 item

1 Like

Thank you bobthebear! You are the best :slight_smile: Those worked

if you can, don't forget to mark it as the Solution for people in the future to easily find =)

1 Like

@bobthebear is indeed the best :smile_cat: