[FIX] web_editor: fix background-image urls becoming absolute on drop

With the recent addition of the parallax option on all snippets,
background-image urls were being converted from relative to absolute on
snippet-drop. This was caused by trying to read the background-image's
url and setting it back onto the target, but there is no way to reliably
read a background-image url in relative form, so it was returned in
absolute form and then written back to the element as is.

This commit fixes that by always converting the absolute URL to relative
when they are on the same origin as the database.

task-2312878

closes odoo/odoo#59098

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

2 files changed, 8 insertions, 3 deletions

diff --git a/addons/web_editor/static/src/js/common/utils.js b/addons/web_editor/static/src/js/common/utils.js
index 6e92bd6955b..8beeca4f26e 100644
--- a/addons/web_editor/static/src/js/common/utils.js
+++ b/addons/web_editor/static/src/js/common/utils.js
@@ -224,6 +224,11 @@ function _getBgImageURL(el) {
     if (!match) {
         return '';
     }
+    const fullURL = new URL(match[2]);
+    // Make URL relative if possible
+    if (fullURL.origin === window.location.origin) {
+        return fullURL.href.slice(fullURL.origin.length);
+    }
     return match[2];
 }
 
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 28a344a323c..d8887d67095 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -3420,9 +3420,9 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({
         Object.entries(this.$target[0].dataset).forEach(([key, value]) => {
             this.img.dataset[key] = value;
         });
-        const src = new URL(getBgImageURL(this.$target[0]), window.location.origin);
-        // Make URL relative because that is how image urls are stored in the database.
-        this.img.src = src.origin === window.location.origin && src.pathname;
+        const src = getBgImageURL(this.$target[0]);
+        // Don't set the src if not relative (ie, not local image: cannot be modified)
+        this.img.src = src.startsWith('/') ? src : '';
         return await this._super(...arguments);
     },