Putting Image URL from retool database query into Image component

[Jimmy]

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!

Sincerely,
Jimmy@Para

[ben-salesi]

Hey @Jimmy,

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

[Jimmy]

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?

[Jimmy]

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

[bobthebear]

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

and heres the structure with more than 1 item

[Jimmy]

Thank you bobthebear! You are the best Those worked

[bobthebear]

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

[victoria]

@bobthebear is indeed the best