From cf57b3966d4dfceed6a4ccf6265d6332d6bff97a Mon Sep 17 00:00:00 2001
From: alexcjohnson <alex@plot.ly>
Date: Wed, 2 Oct 2024 15:56:44 -0400
Subject: [PATCH 1/2] use url directly for layout images when not in static
 mode The data uri is necessary for export only, which should always use
 staticPlot

---
 src/components/images/draw.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/images/draw.js b/src/components/images/draw.js
index cd6dfeb698b..0a87992fc87 100644
--- a/src/components/images/draw.js
+++ b/src/components/images/draw.js
@@ -73,7 +73,7 @@ module.exports = function draw(gd) {
 
         thisImage.attr('xmlns', xmlnsNamespaces.svg);
 
-        if(d.source && d.source.slice(0, 5) === 'data:') {
+        if(!gd._context.staticPlot || (d.source && d.source.slice(0, 5) === 'data:')) {
             thisImage.attr('xlink:href', d.source);
             this._imgSrc = d.source;
         } else {

From b1fd955e9c4772c88e1e35e09f258921dab88152 Mon Sep 17 00:00:00 2001
From: alexcjohnson <alex@plot.ly>
Date: Mon, 7 Oct 2024 17:24:36 -0400
Subject: [PATCH 2/2] adapt layout images tests to new direct-unless-staticPlot
 behavior and add a draftlog

---
 draftlogs/7199_fix.md                    |  1 +
 test/jasmine/tests/layout_images_test.js | 42 ++++++++++++++++++++----
 2 files changed, 36 insertions(+), 7 deletions(-)
 create mode 100644 draftlogs/7199_fix.md

diff --git a/draftlogs/7199_fix.md b/draftlogs/7199_fix.md
new file mode 100644
index 00000000000..c0d57b45198
--- /dev/null
+++ b/draftlogs/7199_fix.md
@@ -0,0 +1 @@
+- Do not convert url-sourced layout images to data uri unless we're in staticPlot mode, to improve interactivity when images are changed with zoom/pan [[#7199](https://github.com/plotly/plotly.js/pull/7199)]
diff --git a/test/jasmine/tests/layout_images_test.js b/test/jasmine/tests/layout_images_test.js
index b4bd40b4cbc..a5166349ecb 100644
--- a/test/jasmine/tests/layout_images_test.js
+++ b/test/jasmine/tests/layout_images_test.js
@@ -319,9 +319,8 @@ describe('Layout images', function() {
         var gd;
         var data = [{ x: [1, 2, 3], y: [1, 2, 3] }];
 
-        beforeEach(function(done) {
-            gd = createGraphDiv();
-            Plotly.newPlot(gd, data, {
+        var layoutFn = function() {
+            return {
                 images: [{
                     source: jsLogo,
                     x: 2,
@@ -331,12 +330,17 @@ describe('Layout images', function() {
                 }],
                 width: 500,
                 height: 400
-            }).then(done);
+            };
+        }
+
+        beforeEach(function(done) {
+            gd = createGraphDiv();
+            Plotly.newPlot(gd, data, layoutFn()).then(done);
         });
 
         afterEach(destroyGraphDiv);
 
-        it('should only create canvas if url image', function(done) {
+        it('should only create canvas if url image and staticPlot', function(done) {
             var originalCreateElement = document.createElement;
             var newCanvasElement;
             spyOn(document, 'createElement').and.callFake(function(elementType) {
@@ -350,7 +354,21 @@ describe('Layout images', function() {
 
             Plotly.relayout(gd, 'images[0].source', dataUriImage)
             .then(function() {
-                expect(newCanvasElement).toBeUndefined();
+                expect(newCanvasElement).withContext('non-static data uri').toBeUndefined();
+
+                return Plotly.relayout(gd, 'images[0].source', jsLogo);
+            })
+            .then(function() {
+                expect(newCanvasElement).withContext('non-static url').toBeUndefined();
+
+                return Plotly.newPlot(gd, data, layoutFn(), {staticPlot: true});
+            })
+            .then(function() {
+                newCanvasElement = undefined;
+                return Plotly.relayout(gd, 'images[0].source', dataUriImage);
+            })
+            .then(function() {
+                expect(newCanvasElement).withContext('static data uri').toBeUndefined();
 
                 return Plotly.relayout(gd, 'images[0].source', jsLogo);
             })
@@ -392,11 +410,21 @@ describe('Layout images', function() {
             .then(done, done.fail);
         });
 
-        it('should remove the image tag if an invalid source', function(done) {
+        it('should remove the image tag if an invalid source and staticPlot', function(done) {
             var selection = d3Select('image');
             expect(selection.size()).toBe(1);
 
             Plotly.relayout(gd, 'images[0].source', 'invalidUrl')
+            .then(function() {
+                var newSelection = d3Select('image');
+                expect(newSelection.size()).toBe(1);
+            })
+            .then(function() {
+                return Plotly.newPlot(gd, data, layoutFn(), {staticPlot: true});
+            })
+            .then(function() {
+                return Plotly.relayout(gd, 'images[0].source', 'invalidUrl');
+            })
             .then(function() {
                 var newSelection = d3Select('image');
                 expect(newSelection.size()).toBe(0);