How to show image in Items list view?

[a7medalyousofi]

I want to show image in Items list view as it shows in the above image instead of url, without using image view option as shown below

[avc]

Hi @a7medalyousofi

In your doctype, you need to set the “image” field

Hope this helps.

[a7medalyousofi]

Already sets

Still show image url in listview

[avc]

@a7medalyousofi

Ok, I missunderstood your requirement.
Use formatters for customize listview …

frappe.listview_settings['Item'] = {
    formatters: {
        image(value) {
            if (value) {
                return `<img src="${value}" style="height: 40px; width: auto; border-radius: 4px;" />`;
            }
            return '';
        }
    }
};

Hope this helps.

[a7medalyousofi]

Thanks, it works

[a7medalyousofi]

Is there a utils function that is used to return small size of image, instead of a full image ?

[focuser2009]

Can you insert an image to show where to put these code? I tried but failure. Thanks

[a7medalyousofi]

@focuser2009
You need to create new Client Script

[focuser2009]

Yes, I made it, but still not display in list view, see below:

Where is the mistakes?

Thanks in advance.

[a7medalyousofi]

Go to … Menu in Item List –> Click on List Settings

Click Add

Check Image and Save

[Sudhanshu]

you are applying this code on form which is wrong.

Select List in Apply To,
then this code will work

[a7medalyousofi]

Yes, he has to select List

[focuser2009]

Ok, I got it. thanks so much.

[focuser2009]

I got it now, thanks so much