Odoo Help



There is no actual functionality to achieve image widget functionality in the list view.

List view is designed in such a way that will show all binary files as Download(size) format irrespective of the file type and widget specified. To achieve this I have modified the code in web module directly as I don't know how to create a customized module to add js code.

The code to be added is:

The file need to be modified is: /addons/web/static/src/js/view_list.js:

Line 2066:

  'button': 'instance.web.list.Button',
 +'field.image': 'instance.web.list.FieldBinaryImage',
  'field.many2onebutton': 'instance.web.list.Many2OneButton',

Line 2230:

            href: download_url,
            size: instance.web.binary_to_binsize(value),
+instance.web.list.FieldBinaryImage = instance.web.list.Column.extend({</br>
+       /**
+     * Return a image to the binary field of specified as widget image</br>
+    *
+     * @private
+     */
+    _format: function (row_data, options) {
+            var placeholder= "/web/static/src/img/placeholder.png";
+        var value = row_data[this.id].value;
+        var download_url;
+        if (value && value.substr(0, 10).indexOf(' ') == -1) {
+            download_url = "data:image/png;base64," + value;
+       }
+        else {
+               download_url = placeholder;
+        }
+       return _.template('<image src="<%-src%>" width="30px" height="30px"/>', {
+            src: download_url,
+       });
+    }
instance.web.list.ProgressBar = instance.web.list.Column.extend({
* Return a formatted progress bar display
* @private
_format: function (row_data, options) {


When you are trying this code to acheive functionality, don't forget to specify widget="image" in view definition and in this post it is not allowing me to add image tag in code it is converting into image icon.

return _.template('Image tag with src="<%-src%>" and width as 30px and height as 30 px', {

ClueLogics Technologies Pvt. Ltd.

--ClueLogics Technologies Pvt. Ltd.--
| 6 5 8
Delhi NCR, India
--ClueLogics Technologies Pvt. Ltd.--

 ClueLogics Technologies Pvt Ltd is a Software product and services provider. We are positioned to deliver robust, rapid and reliable Information Technology solutions that work. What we succeed upon is Technology and Technical Expertise. The industry review of ClueLogics has been commendable for the past years as most of its business comes from repeat orders by highly satisfied clients.

ClueLogics Technologies Pvt. Ltd.
On 6/12/13, 3:11 AM


your image field will be a binary field now if you want to show it in list view you can use widget functionality for it like

       <field name="my_image' widget="image"/>


When i specified widget="image" in list view it doesn't worked until i modified file with given code

Komala Kiran Kumar. Parepalli
on 6/12/13, 3:18 AM
Marcel van der Boom
On 9/23/13, 3:09 PM

I created a small module which does exactly this. The module has just one file which is relevant.


openerp.listview_images = function(instance) {
    /* Add a new mapping to the registry for image fields */

    /* Define a method similar to the one for forms to render image fields */
    instance.web.list.FieldBinaryImage = instance.web.list.Column.extend({
     * Return a image to the binary field of specified as widget image
     * @private
    _format: function (row_data, options) {
            var placeholder = "/web/static/src/img/placeholder.png";
            var value = row_data[this.id].value;
            var img_url = placeholder;

            if (value && value.substr(0, 10).indexOf(' ') == -1) {
        /* Data inline */
        /* FIXME: can we get the mimetype from the data? */
        img_url = "data:image/png;base64," + value;
        } else {
        /* Data by URI (presumably slow) */
        img_url = instance.session.url('/web/binary/image', {model: options.model, field: this.id, id: options.id});
        /* FIXME: move the 30px stuff to something templateable */
        return _.template('<image src="<%-src%>" width="30px" height="30px"/>', {
        src: img_url,

The module is available on github, but I can't post link. [github.com / hsd / listview-images]

HI! I added your module from github to our system, but is showing only a Download link (with the size of the image), not the Thumbnail. Can you help me, what should I do? Thanks, TArpi

Tekse Arpad
on 1/14/14, 8:19 PM

So do I :( same result of TArpi

on 2/6/14, 8:14 AM

same to me

Jhon Felipe Urrego Mejia
on 4/4/14, 9:15 PM
Nhomar Hernandez
On 9/4/15, 4:29 AM

You can use this module:


It is ready to use.



Stefan Reisich

--Stefan Reisich--
Rove.design GmbH
| 7 7 8
Pfungstadt, Germany
--Stefan Reisich--

Stefan Reisich
On 9/20/13, 8:46 AM

here you can see how to implement this in a module instead of making changes to the source, which will be deleted after every update: https://accounts.openerp.com/forum/Help-1/question/483

Huynh Huu Tho
On 1/13/14, 4:47 AM

Hi all,

This is code :


<record id="product_category_tree_view" model="ir.ui.view">

       <field name="name">product.category.tree</field>

        <field name="model">product.category</field>

        <field name="field_parent">child_id</field>

        <field name="arch" type="xml">

            <tree toolbar="True" string="Product Categories">

                <field name="image" widget="image"/>

                <field name="name"/>




field image in class product_category()

'image': fields.binary("Image",help="This field holds the image used as image for the product, limited to 1024x1024px."),

"file product.js"

openerp.product = function(instance) {


    _format: function (row_data, options) {

        var placeholder = "/web/static/src/img/placeholder.png";

        var value = row_data[this.id].value;

        var img_url = placeholder;

        if (value && value.substr(0, 10).indexOf(' ') == -1) {

            img_url = "data:image/png;base64," + value;

        } else {

            img_url = instance.session.url('/web/binary/image', {model: options.model, field: this.id, id: options.id});


        return _.template('<image src="<%-src%>" width="80px"/>', {

            src: img_url



when I click on the "Products by Category", then it does:

this is show


jdhdkjashdkashdkashdkas l Category 1

jhskjdahsdkashkdashkkadjkas l Category 2

i want column image show image thumb ?

About This Community

This community is for professionals and enthusiasts of our products and services. Read Guidelines

Odoo Training Center

Access to our E-learning platform and experience all Odoo Apps through learning videos, exercises and Quizz.

Test it now

Question tools

5 follower(s)


Asked: 6/5/13, 2:42 AM
Seen: 12484 times
Last updated: 7/22/16, 2:57 PM