Handle binary fields. Courtesy of Marcel van der Boom

web_tree_image/__openerp__.py

@@ -4,6 +4,9 @@
 #    OpenERP, Open Source Management Solution
 #    This module copyright (C) 2014 Therp BV (<http://therp.nl>).
 #
+#    Snippet from https://github.com/hsd/listview_images
+#    Copyright (C) 2013 Marcel van der Boom <marcel@hsdev.com>
+#
 #    This program is free software: you can redistribute it and/or modify
 #    it under the terms of the GNU Affero General Public License as
 #    published by the Free Software Foundation, either version 3 of the
@@ -23,11 +26,12 @@
     "version": "1.0",
     "author": "Therp BV",
     "description": """\
-This module defines a tree image widget, to be used with function fields of
-type character. Use widget='tree_image' in your view definition. Optionally, set
-a 'height' tag. Default height is 16px.
+This module defines a tree image widget, to be used with either binary fields
+or function fields of type character. Use widget='tree_image' in your view
+definition. Optionally, set a 'height' tag. Default height is 16px.
 
-The content of the field can be any of the following:
+If you use the widget with a character field, the content of the field can be
+any of the following:
 
 * the absolute or relative location of an image. For example, \
 "/<module>/static/src/img/youricon.png"
@@ -35,9 +39,8 @@ The content of the field can be any of the following:
 * a standard icon from the web distribution, without path or extension, For \
 example, 'gtk-open'
 
-* A dynamic image in a data url base 64 format. To show a regular image field \
-from the model, use a function field wrapper that retrieves the image with \
-bin_size=False in the context, and prefix with 'data:image/png;base64,'
+* A dynamic image in a data url base 64 format. Prefix with \
+'data:image/png;base64,'
     """,
     'depends': [
         'web',

web_tree_image/static/src/js/web_tree_image.js

@@ -1,6 +1,7 @@
 /* 
     OpenERP, Open Source Management Solution
-    This module copyright (C) 2014 Therp BV (<http://therp.nl>).
+    This module copyright (C) 2014 Therp BV (<http://therp.nl>)
+                          (C) 2013 Marcel van der Boom <marcel@hsdev.com>
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU Affero General Public License as
@@ -18,14 +19,29 @@
 
 openerp.web_tree_image = function (instance) {
     instance.web.list.Image = instance.web.list.Column.extend({
-        /* Return an image tag */
         format: function (row_data, options) {
-            if (!row_data[this.id] || !row_data[this.id].value) { return ''; }
-            var src;
-            if (!/\//.test(row_data[this.id].value)) {
-                src = '/web/static/src/img/icons/' + row_data[this.id].value + '.png';
+            /* Return a valid img tag. For image fields, test if the
+             field's value contains just the binary size and retrieve
+            the image from the dedicated controller in that case.
+            Otherwise, assume a character field containing either a
+            stock Odoo icon name without path or extension or a fully
+            fledged location or data url */
+            if (!row_data[this.id] || !row_data[this.id].value) {
+                return '';
+            }
+            var value = row_data[this.id].value, src;
+            if (this.type === 'binary') {
+                if (value && value.substr(0, 10).indexOf(' ') === -1) {
+                    src = "data:image/png;base64," + value;
+                } else {
+                    src = instance.session.url('/web/binary/image', {model: options.model, field: this.id, id: options.id});
+                }
             } else {
-                src = row_data[this.id].value;
+                if (!/\//.test(row_data[this.id].value)) {
+                    src = '/web/static/src/img/icons/' + row_data[this.id].value + '.png';
+                } else {
+                    src = row_data[this.id].value;
+                }
             }
             return instance.web.qweb.render('ListView.row.image', {widget: this, src: src});
         }