[FIX] web: fix kanban_image for binary data

`.value` is always bin size. By using `.raw_value` we allow the condition to be
true when actually using binary data.

This solves an issue when trying to display the image for a model being created
since at that time the URL does not work yet since the model does not exist.
Eg. website_sale extra images on product.

This also prevents (potentially a lot of) unnecessary GET to fetch images for
which we already have the binary data downloaded.

Part of task 34045

PR: #30881

2 files changed, 33 insertions, 7 deletions

diff --git a/addons/web/static/src/js/views/kanban/kanban_record.js b/addons/web/static/src/js/views/kanban/kanban_record.js
index 7e56ecf122b..3dc1d6788bf 100644
--- a/addons/web/static/src/js/views/kanban/kanban_record.js
+++ b/addons/web/static/src/js/views/kanban/kanban_record.js
@@ -183,10 +183,10 @@ var KanbanRecord = Widget.extend({
     _getImageURL: function (model, field, id, cache, options) {
         options = options || {};
         var url;
-        if (this.record[field] && this.record[field].value && !utils.is_bin_size(this.record[field].value)) {
+        if (this.record[field] && this.record[field].raw_value && !utils.is_bin_size(this.record[field].raw_value)) {
             // Use magic-word technique for detecting image type
-            url = 'data:image/' + this.file_type_magic_word[this.record[field].value[0]] + ';base64,' + this.record[field].value;
-        } else if (this.record[field] && ! this.record[field].value) {
+            url = 'data:image/' + this.file_type_magic_word[this.record[field].raw_value[0]] + ';base64,' + this.record[field].raw_value;
+        } else if (this.record[field] && ! this.record[field].raw_value) {
             url = "/web/static/src/img/placeholder.png";
         } else {
             if (_.isArray(id)) { id = id[0]; }
diff --git a/addons/web/static/tests/views/kanban_tests.js b/addons/web/static/tests/views/kanban_tests.js
index cc6fbe3a481..5483e296f67 100644
--- a/addons/web/static/tests/views/kanban_tests.js
+++ b/addons/web/static/tests/views/kanban_tests.js
@@ -4850,8 +4850,8 @@ QUnit.module('Views', {
         }
     });
 
-    QUnit.test('test displaying image', function (assert) {
-        assert.expect(2);
+    QUnit.test('test displaying image (URL)', function (assert) {
+        assert.expect(1);
 
         var kanban = createView({
             View: KanbanView,
@@ -4859,15 +4859,41 @@ QUnit.module('Views', {
             data: this.data,
             arch: '<kanban class="o_kanban_test">' +
                       '<field name="id"/>' +
-                      '<field name="image"/>' +
                       '<templates><t t-name="kanban-box"><div>' +
                           '<img t-att-src="kanban_image(\'partner\', \'image\', record.id.raw_value)"/>' +
                       '</div></t></templates>' +
                   '</kanban>',
         });
 
+        // since the field image is not set, kanban_image will generate an URL
         var imageOnRecord = kanban.$('img[data-src*="/web/image"][data-src*="&id=1"]');
-        assert.strictEqual(imageOnRecord.length, 1, "partner with image display image");
+        assert.strictEqual(imageOnRecord.length, 1, "partner with image display image by url");
+
+        kanban.destroy();
+    });
+
+    QUnit.test('test displaying image (binary & placeholder)', function (assert) {
+        assert.expect(2);
+
+        var kanban = createView({
+            View: KanbanView,
+            model: 'partner',
+            data: this.data,
+            arch: '<kanban class="o_kanban_test">' +
+                      '<field name="id"/>' +
+                      '<field name="image"/>' +
+                      '<templates><t t-name="kanban-box"><div>' +
+                          '<img t-att-src="kanban_image(\'partner\', \'image\', record.id.raw_value)"/>' +
+                      '</div></t></templates>' +
+                  '</kanban>',
+            mockRPC: function (route, args) {
+                if (route === 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACAA==') {
+                    assert.ok("The view's image should have been fetched.");
+                    return $.when();
+                }
+                return this._super.apply(this, arguments);
+            },
+        });
 
         var placeholders = kanban.$('img[data-src$="/web/static/src/img/placeholder.png"]');
         assert.strictEqual(placeholders.length, this.data.partner.records.length - 1,