How to display images when a table row is selected

I have a table and a form. When a row is selected in the table the form updates as expected.

One of the form components is an image component. For whatever reason, I get scope errors when using the File id property. I simply want to show an image in the image component. Images are uploaded directly to Retool file storage. These components are all on the same page so I have no idea why it has scope problems.

I also tried using a global variable and storing the url in it directly for testing. On row selected I update the global variable with the image url for that row but in that case nothing loads in the image component at all.

Screenshot 2025-02-24 172600

Hi @Mark_Price Could you please export a JSON file of your application and share it with me? This will allow me to import it on my end and accurately diagnose the issue you are experiencing.

Hi @Mark_Price, Welcome to the Retool Community!

From your screenshots, it looks like you're using the Storage tab to pass the image, but you should use the URL tab instead. Make sure to reference your image using:

{{ table.selectedRow.image }}

Here are some screenshots showing how it works as expected: when a row is selected in the table, the image is displayed in the form's Image component.


Feel free to ask if you need further assistance or have additional questions. We're here to help!

4 Likes

Hey @Mark_Price - the scoping of that particular input is definitely weird. :thinking: It seems to be globally scoped, but I'm sure if that's intentional or not. The workaround that you described - saving the data to a global variable - should work, though.

Are you storing the whole URL or just the ID? If the former, you'll want to set the component source to the URL option.

image