diff --git a/src/ViewerCore.tsx b/src/ViewerCore.tsx index ca7b5d8..c70d980 100644 --- a/src/ViewerCore.tsx +++ b/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 { @@ -71,6 +72,7 @@ export default class ViewerCore extends React.Component { if (!loadComplete) { @@ -181,12 +184,21 @@ export default class ViewerCore extends React.Component { - 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 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; diff --git a/src/__tests__/viewer.test.tsx b/src/__tests__/viewer.test.tsx index 148d2d4..7c961a7 100644 --- a/src/__tests__/viewer.test.tsx +++ b/src/__tests__/viewer.test.tsx @@ -78,6 +78,8 @@ class ViewerTester extends React.Component 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'); + }); });