Displaying an image in an array

Hi,

In my Supabase Products table I have an array with multiple objects containing info about images I want to display.
The same post(row) also contains info about the product such as title, description, price, stock etc.

In my app I’m building I want to display this info in a wrapper object (Title, price, description) and the FIRST image in this array. How can I accomplish this?

This is how the array looks like:
[
“{\n "is_youtube_thumbnail":false,\n "position":"1",\n "title":"1705930560655f54d15c87d.jpeg",\n "url":"https://quickbutik.imgix.net/32335Q/products/1705930560655f54d15c87.jpeg\”\n }“,
“{\n "is_youtube_thumbnail":false,\n "position":"2",\n "title":"1705930561655f53e8bf942.jpeg",\n "url":"https://quickbutik.imgix.net/32335Q/products/1705930561655f53e8bf94.jpeg\”\n }”
]

@anas, @ludo, do you have time to look at this?

Hey @digipeak Thanks for posting here and I am sorry for not seeing your post earlier.

So the links you shared don’t work, but I can simply explain to you how to get what you need.

so when you receive the data from Supabase it will be inside a List variable, let’s call it data. When you have a placeholder inside your Listview (like your single item component) you will be able to pass something called element which is the single item from the list, which is the row in your case.

Then, inside that element you will easily find title, etc. For the image array inside the row, let’s call it imageArray, you will find it inside element, then click on it again and choose getItem, then type 0 (first item in the list). This will bring you back the first item in the array which is the image itself.

If it didn’t help please let me know. We can have a quick call as well so I help you with it better :slight_smile:

Hi @anas ,
Yes, I would very much have a quick call because I have no Idea on what I’m doing here… :sweat_smile:

@digipeak Sure! I will send you a link privatly here so you can use it to book a call with me :slight_smile: