feat: add defaultImg prop

src/ViewerCore.tsx

@@ -26,6 +26,7 @@ export interface ViewerCoreState {
   scaleX?: number;
   scaleY?: number;
   loading?: boolean;
+  loadFailed?: boolean;
 }
 
 export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreState> {
@@ -71,6 +72,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
       scaleX: 1,
       scaleY: 1,
       loading: false,
+      loadFailed: false,
     };
 
     this.setContainerWidthHeight();
@@ -174,6 +176,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
     this.setState({
       activeIndex: activeIndex,
       loading: true,
+      loadFailed: false,
     });
     img.onload = () => {
       if (!loadComplete) {
@@ -181,12 +184,21 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
       }
     };
     img.onerror = () => {
-      this.setState({
-        activeIndex: activeIndex,
-        imageWidth: 0,
-        imageHeight: 0,
-        loading: false,
-      });
+      if (this.props.defaultImg) {
+        this.setState({
+          loadFailed: true,
+        });
+        const deafultImgWidth = this.props.defaultImg.width || this.containerWidth * .5;
+        const defaultImgHeight = this.props.defaultImg.height || this.containerHeight * .5;
+        this.loadImgSuccess(activeImage, deafultImgWidth, defaultImgHeight);
+      } else {
+        this.setState({
+          activeIndex: activeIndex,
+          imageWidth: 0,
+          imageHeight: 0,
+          loading: false,
+        });
+      }
     };
     img.src = activeImage.src;
     if (img.complete) {
@@ -470,6 +482,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
           rotate: 1,
           imageWidth: 0,
           imageHeight: 0,
+          loadFailed: false,
         });
       }, transitionDuration);
       return;
@@ -569,7 +582,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
         )}
         <ViewerCanvas
           prefixCls={this.prefixCls}
-          imgSrc={activeImg.src}
+          imgSrc={this.state.loadFailed ? this.props.defaultImg.src || activeImg.src : activeImg.src}
           visible={this.props.visible}
           width={this.state.width}
           height={this.state.height}

src/ViewerProps.ts

@@ -1,4 +1,4 @@
-export interface ImageSize {
+export interface ViewerImageSize {
   width: number;
   height: number;
 }
@@ -7,7 +7,7 @@ export interface ImageDecorator {
   src: string;
   alt?: string;
   downloadUrl?: string;
-  defaultSize?: ImageSize;
+  defaultSize?: ViewerImageSize;
 }
 
 export interface ToolbarConfig {
@@ -17,6 +17,12 @@ export interface ToolbarConfig {
   onClick?: (activeImage: ImageDecorator) => void;
 }
 
+export interface ViewerDefaultImg {
+  src: string;
+  width?: number;
+  height?: number;
+}
+
 interface ViewerProps {
   /** viewer是否可见 */
   visible?: boolean;
@@ -69,7 +75,11 @@ interface ViewerProps {
   // zoom speed
   zoomSpeed?: number;
 
-  defaultSize?: ImageSize;
+  // default image size
+  defaultSize?: ViewerImageSize;
+
+  // if load img failed, show default img
+  defaultImg?: ViewerDefaultImg;
 }
 
 export default ViewerProps;

src/__tests__/viewer.test.tsx

@@ -78,6 +78,8 @@ class ViewerTester extends React.Component<ViewerTesterProps & ViewerProps, any>
 
 import * as EventEmitter from 'wolfy87-eventemitter';
 
+const FAILED_IMG = 'fail_img';
+
 class MockImage {
   source = '';
   width = 0;
@@ -90,7 +92,11 @@ class MockImage {
   set src(value: string) {
     this.source = value;
     this.width = this.height = 100;
-    this.ee.emitEvent('load');
+    if (this.source === FAILED_IMG) {
+      this.ee.emitEvent('error');
+    } else {
+      this.ee.emitEvent('load');
+    }
   }
 
   set onerror(ev) {
@@ -563,4 +569,30 @@ describe('Viewer', () => {
     expect(imgNode.style.width).toBe('200px');
     expect(imgNode.style.width).toBe('200px');
   });
+
+  it('set defaultImg', () => {
+    const defaultImg = 'deafult_img';
+
+    viewerHelper.new({
+      images: [{
+        src: FAILED_IMG,
+        alt: 'lake',
+      }, {
+        src: img2,
+        alt: 'mountain',
+      }],
+      defaultImg: {
+        src: defaultImg,
+        width: 100,
+        height: 100,
+      },
+    });
+
+    viewerHelper.open();
+
+    const imgNode = $$('img.react-viewer-image')[0];
+    expect(imgNode.src).toBe(`http://localhost/${defaultImg}`);
+    expect(imgNode.style.width).toBe('100px');
+    expect(imgNode.style.width).toBe('100px');
+  });
 });