diff --git a/fs_image/README.rst b/fs_image/README.rst
index 5e63a11bc3..8937e4e069 100644
--- a/fs_image/README.rst
+++ b/fs_image/README.rst
@@ -239,6 +239,7 @@ Contributors
 ------------
 
 -  Laurent Mignon <laurent.mignon@acsone.eu>
+-  Nguyen Minh Chien <chien@trobz.com>
 
 Maintainers
 -----------
diff --git a/fs_image/__manifest__.py b/fs_image/__manifest__.py
index 58e3b05d41..31377443b7 100644
--- a/fs_image/__manifest__.py
+++ b/fs_image/__manifest__.py
@@ -5,11 +5,11 @@
     "name": "Fs Image",
     "summary": """
         Field to store images into filesystem storages""",
-    "version": "16.0.1.0.3",
+    "version": "17.0.1.0.0",
     "license": "AGPL-3",
     "author": "ACSONE SA/NV,Odoo Community Association (OCA)",
     "website": "https://github.com/OCA/storage",
-    "depends": ["fs_file"],
+    "depends": ["fs_file", "web"],
     "data": [],
     "demo": [],
     "maintainers": ["lmignon"],
diff --git a/fs_image/fields.py b/fs_image/fields.py
index 9d50e2691a..fe1b813edd 100644
--- a/fs_image/fields.py
+++ b/fs_image/fields.py
@@ -202,7 +202,7 @@ def _set_image_process_mode(self):
         finally:
             self._image_process_mode = False
 
-    def _process_related(self, value: FSImageValue):
+    def _process_related(self, value: FSImageValue, env):
         """Override to resize the related value before saving it on self."""
         if not value:
             return None
@@ -210,7 +210,7 @@ def _process_related(self, value: FSImageValue):
             # no need to process images for computed fields, or related fields
             # without max_width/max_height
             return value
-        value = super()._process_related(value)
+        value = super()._process_related(value, env)
         new_value = BytesIO(self._image_process(value))
         return FSImageValue(value=new_value, alt_text=value.alt_text, name=value.name)
 
diff --git a/fs_image/readme/CONTRIBUTORS.md b/fs_image/readme/CONTRIBUTORS.md
index f2af9193ce..da20decb6f 100644
--- a/fs_image/readme/CONTRIBUTORS.md
+++ b/fs_image/readme/CONTRIBUTORS.md
@@ -1 +1,2 @@
 - Laurent Mignon \<<laurent.mignon@acsone.eu>\>
+- Nguyen Minh Chien \<<chien@trobz.com>\>
diff --git a/fs_image/static/description/index.html b/fs_image/static/description/index.html
index ec1bb759fb..8c622717bf 100644
--- a/fs_image/static/description/index.html
+++ b/fs_image/static/description/index.html
@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
@@ -582,6 +581,7 @@ <h2><a class="toc-backref" href="#toc-entry-8">Authors</a></h2>
 <h2><a class="toc-backref" href="#toc-entry-9">Contributors</a></h2>
 <ul class="simple">
 <li>Laurent Mignon &lt;<a class="reference external" href="mailto:laurent.mignon&#64;acsone.eu">laurent.mignon&#64;acsone.eu</a>&gt;</li>
+<li>Nguyen Minh Chien &lt;<a class="reference external" href="mailto:chien&#64;trobz.com">chien&#64;trobz.com</a>&gt;</li>
 </ul>
 </div>
 <div class="section" id="maintainers">
diff --git a/fs_image/static/src/views/dialogs/alttext_dialog.xml b/fs_image/static/src/views/dialogs/alttext_dialog.xml
index afdd22c838..ecdc476de3 100644
--- a/fs_image/static/src/views/dialogs/alttext_dialog.xml
+++ b/fs_image/static/src/views/dialogs/alttext_dialog.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
-    <t t-name="fs_image.AltTextDialog" owl="1">
+    <t t-name="fs_image.AltTextDialog">
         <Dialog size="'md'" title="props.title">
             <div class="form-group row">
                 <t t-if="props.readonly">
@@ -16,7 +16,7 @@
                     />
                 </div>
             </div>
-            <t t-set-slot="footer" owl="1">
+            <t t-set-slot="footer">
                 <button
                     class="btn btn-primary"
                     t-ref="btn-confirm"
diff --git a/fs_image/static/src/views/fields/fsimage_field.esm.js b/fs_image/static/src/views/fields/fsimage_field.esm.js
index fe286764f5..053e6fe4a2 100644
--- a/fs_image/static/src/views/fields/fsimage_field.esm.js
+++ b/fs_image/static/src/views/fields/fsimage_field.esm.js
@@ -7,83 +7,74 @@ import {
     ImageField,
     fileTypeMagicWordMap,
     imageCacheKey,
+    imageField,
 } from "@web/views/fields/image/image_field";
-import {onWillUpdateProps, useState} from "@odoo/owl";
-
 import {AltTextDialog} from "../dialogs/alttext_dialog.esm";
+import {_t} from "@web/core/l10n/translation";
 import {registry} from "@web/core/registry";
-import {url} from "@web/core/utils/urls";
 import {useService} from "@web/core/utils/hooks";
+import {url as utilUrl} from "@web/core/utils/urls";
 
 const placeholder = "/web/static/img/placeholder.png";
 
 export class FSImageField extends ImageField {
     setup() {
         // Call super.setup() to initialize the state
-        super.setup();
-        this.state = useState({
-            ...this.props.value,
-            ...this.state,
-        });
-        onWillUpdateProps((nextProps) => {
-            this.state.isUploading = false;
-            const {filename, mimetype, alt_text, url} = nextProps.value || {};
-            this.state.filename = filename;
-            this.state.mimetype = mimetype;
-            this.state.url = url;
-            this.state.alt_text = alt_text;
-        });
+        super.setup(...arguments);
         this.dialogService = useService("dialog");
     }
 
     getUrl(previewFieldName) {
         if (
             this.state.isValid &&
-            this.props.value &&
-            typeof this.props.value === "object"
+            this.props.record.data[this.props.name] &&
+            typeof this.props.record.data[this.props.name] === "object"
         ) {
             // Check if value is a dict
-            if (this.props.value.content) {
+            if (this.props.record.data[this.props.name].content) {
                 // We use the binary content of the value
                 // Use magic-word technique for detecting image type
                 const magic =
-                    fileTypeMagicWordMap[this.props.value.content[0]] || "png";
-                return `data:image/${magic};base64,${this.props.value.content}`;
+                    fileTypeMagicWordMap[
+                        this.props.record.data[this.props.name].content[0]
+                    ] || "png";
+                return `data:image/${magic};base64,${
+                    this.props.record.data[this.props.name].content
+                }`;
             }
             const model = this.props.record.resModel;
             const id = this.props.record.resId;
-            let base_url = this.props.value.url;
+            let base_url = this.props.record.data[this.props.name].url;
             if (id !== undefined && id !== null && id !== false) {
                 const field = previewFieldName;
-                const filename = this.props.value.filename;
+                const filename = this.props.record.data[this.props.name].filename;
                 base_url = `/web/image/${model}/${id}/${field}/${filename}`;
             }
-            return url(base_url, {unique: imageCacheKey(this.rawCacheKey)});
+            return utilUrl(base_url, {unique: imageCacheKey(this.rawCacheKey)});
         }
         return placeholder;
     }
 
-    get hasTooltip() {
-        return this.props.enableZoom && !this.props.isDebugMode && this.props.value;
-    }
-
-    onFileUploaded(info) {
-        this.state.isValid = true;
-        this.props.update({
-            filename: info.name,
-            content: info.data,
+    async onFileUploaded(info) {
+        this.props.record.update({
+            [this.props.name]: {
+                filename: info.name,
+                content: info.data,
+            },
         });
     }
     onAltTextEdit() {
         const self = this;
-        const altText = this.props.value.alt_text || "";
+        const altText = this.props.record.data[this.props.name].alt_text || "";
         const dialogProps = {
-            title: this.env._t("Alt Text"),
+            title: _t("Alt Text"),
             altText: altText,
             confirm: (value) => {
-                self.props.update({
-                    ...self.props.value,
-                    alt_text: value,
+                self.props.record.update({
+                    [self.props.name]: {
+                        ...this.props.record.data[this.props.name],
+                        alt_text: value,
+                    },
                 });
             },
         };
@@ -92,4 +83,10 @@ export class FSImageField extends ImageField {
 }
 
 FSImageField.template = "fs_image.FSImageField";
-registry.category("fields").add("fs_image", FSImageField);
+
+export const fSImageField = {
+    ...imageField,
+    component: FSImageField,
+};
+
+registry.category("fields").add("fs_image", fSImageField);
diff --git a/fs_image/static/src/views/fields/fsimage_field.xml b/fs_image/static/src/views/fields/fsimage_field.xml
index cc1eeb507a..511bdd7cd9 100644
--- a/fs_image/static/src/views/fields/fsimage_field.xml
+++ b/fs_image/static/src/views/fields/fsimage_field.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-    <t t-name="fs_image.FSImageField" owl="1">
+    <t t-name="fs_image.FSImageField">
         <div class="d-inline-block position-relative opacity-trigger-hover">
             <div
                 t-attf-class="position-absolute d-flex justify-content-between w-100 bottom-0 opacity-0 opacity-100-hover {{isMobile ? 'o_mobile_controls' : ''}}"
@@ -13,7 +13,6 @@
                         acceptedFileExtensions="props.acceptedFileExtensions"
                         t-key="props.record.resId"
                         onUploaded.bind="onFileUploaded"
-                        type="'image'"
                     >
                         <t t-set-slot="toggler">
                             <button
@@ -25,8 +24,8 @@
                             </button>
                         </t>
                         <button
-                            t-if="props.value and state.isValid"
-                            class="o_clear_file_button btn btn-light border-0 rounded-circle m-1 p-1"
+                            t-if="props.record.data[props.name] and state.isValid"
+                            class="o_add_alter_text_button btn btn-light border-0 rounded-circle m-1 p-1"
                             data-tooltip="Alt Text"
                             aria-label="Set Alt Text"
                             t-on-click="onAltTextEdit"
@@ -34,7 +33,7 @@
                             <i class="fa fa-blind fa-fw" />
                         </button>
                         <button
-                            t-if="props.value and state.isValid"
+                            t-if="props.record.data[props.name] and state.isValid"
                             class="o_clear_file_button btn btn-light border-0 rounded-circle m-1 p-1"
                             data-tooltip="Clear"
                             aria-label="Clear"
@@ -46,7 +45,8 @@
                 </t>
             </div>
             <img
-                class="img img-fluid w-100"
+                loading="lazy"
+                class="img img-fluid"
                 alt="Binary file"
                 t-att-src="this.getUrl(props.previewImage or props.name)"
                 t-att-name="props.name"
@@ -55,7 +55,7 @@
                 t-att-style="sizeStyle"
                 t-att-alt="props.alt"
                 t-on-error.stop="onLoadFailed"
-                t-att-data-tooltip-template="hasTooltip and tooltipAttributes.template"
+                t-att-data-tooltip-template="hasTooltip and tooltipAttributes.template or ''"
                 t-att-data-tooltip-info="hasTooltip and tooltipAttributes.info"
                 t-att-data-tooltip-delay="hasTooltip and props.zoomDelay"
             />
