diff --git a/src/ol/renderer/canvas/ImageLayer.js b/src/ol/renderer/canvas/ImageLayer.js
index 4f035def52..aec92d876d 100644
--- a/src/ol/renderer/canvas/ImageLayer.js
+++ b/src/ol/renderer/canvas/ImageLayer.js
@@ -2,6 +2,7 @@
  * @module ol/renderer/canvas/ImageLayer
  */
 import CanvasLayerRenderer from './Layer.js';
+import ImageState from '../../ImageState.js';
 import ViewHint from '../../ViewHint.js';
 import {ENABLE_RASTER_REPROJECTION} from '../../reproj/common.js';
 import {IMAGE_SMOOTHING_DISABLED, IMAGE_SMOOTHING_ENABLED} from './common.js';
@@ -91,8 +92,12 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
           pixelRatio,
           projection
         );
-        if (image && this.loadImage(image)) {
-          this.image_ = image;
+        if (image) {
+          if (this.loadImage(image)) {
+            this.image_ = image;
+          } else if (image.getState() === ImageState.EMPTY) {
+            this.image_ = null;
+          }
         }
       } else {
         this.image_ = null;
diff --git a/test/browser/spec/ol/renderer/canvas/ImageLayer.test.js b/test/browser/spec/ol/renderer/canvas/ImageLayer.test.js
index 9cf68d423f..be0db8fbfe 100644
--- a/test/browser/spec/ol/renderer/canvas/ImageLayer.test.js
+++ b/test/browser/spec/ol/renderer/canvas/ImageLayer.test.js
@@ -1,6 +1,8 @@
 import CanvasImageLayerRenderer from '../../../../../../src/ol/renderer/canvas/ImageLayer.js';
 import Feature from '../../../../../../src/ol/Feature.js';
 import ImageLayer from '../../../../../../src/ol/layer/Image.js';
+import ImageState from '../../../../../../src/ol/ImageState.js';
+import ImageWrapper from '../../../../../../src/ol/Image.js';
 import Map from '../../../../../../src/ol/Map.js';
 import Point from '../../../../../../src/ol/geom/Point.js';
 import Projection from '../../../../../../src/ol/proj/Projection.js';
@@ -446,5 +448,18 @@ describe('ol/renderer/canvas/ImageLayer', function () {
         }
       });
     });
+    it('resets image when empty', function (done) {
+      const frameState = createLayerFrameState([0, 0, 100, 100]);
+      layer.getSource().on('imageloadend', function () {
+        if (renderer.prepareFrame(frameState)) {
+          renderer.renderFrame(frameState, null);
+        }
+        expect(renderer.image_).to.be.a(ImageWrapper);
+        renderer.image_.state = ImageState.EMPTY;
+        expect(renderer.prepareFrame(frameState)).to.be(false);
+        expect(renderer.image_).to.be(null);
+        done();
+      });
+    });
   });
 });