[FIX] web: image_field: should properly load the new image

**TO REPRODUCE**

- open contacts
- open a contact with a picture (for ex, douglas fletcher)
- change the picture => new picture is displayed
- click on cloud icon to force save => new picture is displayed
- repeat: After repeating, the old picture will be displayed.

**SOLUTION**

Before this change, `getUrl` is bound to the rendering context
instead of the component and it will write to the rendering context.
This is introduced in this commit: https://github.com/odoo/owl/commit/df59ec49aefce2e0913fdc1792d42b9680fb28b6



The following excerpt from the mentioned commit explains:

"A side-effect of this change is that now the rendering context is no
longer the instance of the component by default, but is always an object
with the component in its prototype chain."

To make sure that `getUrl` is properly bound to the component,
we should call it from the `this` of the rendering context.

closes odoo/odoo#115692

Task-id: 3204546
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

addons/web/static/src/views/fields/image/image_field.xml

@@ -32,7 +32,7 @@
             <img
                 class="img img-fluid w-100"
                 alt="Binary file"
-                t-att-src="getUrl(props.previewImage or props.name)"
+                t-att-src="this.getUrl(props.previewImage or props.name)"
                 t-att-name="props.name"
                 t-att-height="props.height"
                 t-att-width="props.width"

addons/web/static/tests/views/fields/image_field_tests.js

@@ -277,6 +277,10 @@ QUnit.module("Fields", (hooks) => {
             rec.document = "3 kb";
             rec.__last_update = "2022-08-05 08:37:00"; // 1659688620000
 
+            // 1659692220000, 1659695820000
+            const lastUpdates = ["2022-08-05 09:37:00", "2022-08-05 10:37:00"];
+            let index = 0;
+
             await makeView({
                 type: "form",
                 resModel: "partner",
@@ -289,8 +293,9 @@ QUnit.module("Fields", (hooks) => {
                     </form>`,
                 mockRPC(_route, { method, args }) {
                     if (method === "write") {
-                        args[1].__last_update = "2022-08-05 09:37:00"; // 1659692220000
+                        args[1].__last_update = lastUpdates[index];
                         args[1].document = "4 kb";
+                        index++;
                     }
                 },
             });
@@ -324,6 +329,27 @@ QUnit.module("Fields", (hooks) => {
                 getUnique(target.querySelector(".o_field_image img")),
                 "1659692220000"
             );
+
+            // Change the image again. After clicking save, it should have the correct new url.
+            await editInput(
+                target,
+                "input[type=file]",
+                new File(
+                    [Uint8Array.from([...atob(PRODUCT_IMAGE)].map((c) => c.charCodeAt(0)))],
+                    "fake_file2.gif",
+                    { type: "png" }
+                )
+            );
+            assert.strictEqual(
+                target.querySelector("div[name=document] img").dataset.src,
+                `data:image/gif;base64,${PRODUCT_IMAGE}`
+            );
+
+            await clickSave(target);
+            assert.strictEqual(
+                getUnique(target.querySelector(".o_field_image img")),
+                "1659695820000"
+            );
         }
     );