diff --git a/src/common/Image/Image.js b/src/common/Image/Image.js
index 98f4955e8..520fade03 100644
--- a/src/common/Image/Image.js
+++ b/src/common/Image/Image.js
@@ -1,11 +1,15 @@
const React = require('react');
const PropTypes = require('prop-types');
-const Image = ({ className, src, alt, fallbackSrc, renderFallback }) => {
+const Image = ({ className, src, alt, fallbackSrc, renderFallback, ...props }) => {
const [broken, setBroken] = React.useState(false);
- const onError = React.useCallback(() => {
+ const onError = React.useCallback((event) => {
+ if (typeof props.onError === 'function') {
+ props.onError(event);
+ }
+
setBroken(true);
- }, []);
+ }, [props.onError]);
React.useLayoutEffect(() => {
setBroken(false);
}, [src]);
@@ -13,9 +17,9 @@ const Image = ({ className, src, alt, fallbackSrc, renderFallback }) => {
typeof renderFallback === 'function' ?
renderFallback()
:
-
+
:
-
;
+
;
};
Image.propTypes = {
diff --git a/storybook/stories/Image/ImageWithFallback/ImageWithFallback.js b/storybook/stories/Image/ImageWithFallback/ImageWithFallback.js
index 82cb90e2d..e18552e16 100644
--- a/storybook/stories/Image/ImageWithFallback/ImageWithFallback.js
+++ b/storybook/stories/Image/ImageWithFallback/ImageWithFallback.js
@@ -1,5 +1,6 @@
const React = require('react');
const { storiesOf } = require('@storybook/react');
+const { action } = require('@storybook/addon-actions');
const Icon = require('stremio-icons/dom');
const { Image } = require('stremio/common');
const styles = require('./styles');
@@ -8,6 +9,7 @@ storiesOf('Image', module).add('ImageWithFallback', () => (
(
)}
diff --git a/storybook/stories/Image/SampleImage/SampleImage.js b/storybook/stories/Image/SampleImage/SampleImage.js
index 10880fff4..7436c25a3 100644
--- a/storybook/stories/Image/SampleImage/SampleImage.js
+++ b/storybook/stories/Image/SampleImage/SampleImage.js
@@ -1,11 +1,19 @@
const React = require('react');
const { storiesOf } = require('@storybook/react');
+const { action } = require('@storybook/addon-actions');
const { Image } = require('stremio/common');
const styles = require('./styles');
-storiesOf('Image', module).add('SampleImage', () => (
-
-));
+storiesOf('Image', module).add('SampleImage', () => {
+ const domEventHandler = React.useCallback((event) => {
+ action('domEventHandler')(event.currentTarget.dataset);
+ }, []);
+ return (
+
+ );
+});