Displaying an image in a list

General Q&A
1

I am trying to display an image in a product list and tried the following:

<list empty-message="No products assigned to you yet">
        <list-item query="products">
            <header>{name}</header> 
            <content><display-image src='{icon}'/></content> 
            <footer></footer> 
            <accent color="info" />
        </list-item> 
</list>

Is this possible, and if so what is the correct way/approach?

PS: The data model contains icon and name:

 <model name="product" label="Product">
        <field name="icon" label="Icon" type="photo"/>
        <field name="name" label="Name" type="text:name"/>
        <field name="code" label="Code" type="text"/>
        <belongs-to model="user"/>
        <display>{name}</display>
    </model>
1 Like
2

No worries - looks like I was after

3

Okay, no problem. Added the answer for future reference.

4

To show a photo in a list component you'll need to use the <asset src="{dbObject.photo}" /> atrributte of the inner list-item.

Please see: https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/list for more information on valid attributes for list. <display-image src='{icon}'/> is not a valid attribute for a list.

Using your example you could use the following:

<list empty-message="No products assigned to you yet">
    <list-item query="products">
        <header>{name}</header> 
        <asset src="{icon}" />
        <accent color="info" />
    </list-item> 
</list>
3 Likes