Odoo Help

10 Answers


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.
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"/>


1 Comment
Komala Kiran Kumar. Parepalli
6/12/13, 3:18 AM

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

Marcel van der Boom
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]

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

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

2/6/14, 8:14 AM

So do I :( same result of TArpi

Jhon Felipe Urrego Mejia
4/4/14, 9:15 PM

same to me

Nhomar Hernandez
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
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
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 ?

Ask a Question
About This Community

This platform is for beginners and experts willing to share their Odoo knowledge. It's not a forum to discuss ideas, but a knowledge base of questions and their answers.

Odoo Training Center

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

Test it now