example

example/.storybook/presets.js

@@ -10,7 +10,7 @@ module.exports = [
     },
   },
   {
-    name: '@storybook/addon-docs/react/preset',
+    name: '@storybook/addon-docs/preset',
     options: {
       configureJSX: true,
       sourceLoaderOptions: null,

example/package.json

@@ -29,12 +29,12 @@
     ]
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^5.3.0-beta.16",
-    "@storybook/addon-docs": "^5.3.0-beta.16",
-    "@storybook/addon-links": "^5.3.0-beta.16",
-    "@storybook/addons": "^5.3.0-beta.16",
-    "@storybook/preset-create-react-app": "^1.3.2",
-    "@storybook/react": "^5.3.0-beta.16",
+    "@storybook/addon-actions": "^5.3.3",
+    "@storybook/addon-docs": "^5.3.3",
+    "@storybook/addon-links": "^5.3.3",
+    "@storybook/addons": "^5.3.3",
+    "@storybook/preset-create-react-app": "^1.5.1",
+    "@storybook/react": "^5.3.3",
     "@storybook/storybook-deployer": "^2.8.1",
     "typescript": "3.7.2"
   }

example/src/index.tsx

@@ -4,16 +4,25 @@ import { PhotoSlider } from 'react-photo-view';
 import { IPhotoProvider } from 'react-photo-view/dist/PhotoProvider';
 import { IPhotoConsumer } from 'react-photo-view/dist/PhotoConsumer';
 import { IPhotoSliderProps } from 'react-photo-view/dist/PhotoSlider';
+import photo1 from './1.jpg';
+import photo2 from './2.jpg';
+import photo3 from './3.jpg';
+import photo4 from './4.jpg';
+import photo5 from './5.jpg';
+import photo6 from './6.jpg';
+import photo7 from './7.jpg';
+import photo8 from './8.jpg';
+
 
 export const photoImages = [
-  '1.jpg',
-  '2.jpg',
-  '3.jpg',
-  '4.jpg',
-  '5.jpg',
-  '6.jpg',
-  '7.jpg',
-  '8.jpg',
+  photo1,
+  photo2,
+  photo3,
+  photo4,
+  photo5,
+  photo6,
+  photo7,
+  photo8,
 ];
 
 export const ImageList = styled.div`

example/src/stories/Test.stories.mdx

@@ -14,6 +14,7 @@ import {
   IPhotoConsumerForwardProps,
   IPhotoSliderForwardProps,
 } from '../';
+import defaultPhoto from '../default-photo.svg';
 
 <Meta title="React-photo-view" />
 
@@ -33,22 +34,6 @@ import {
   </Story>
 </Preview>
 
-## 两张预览
-
-<Preview>
-  <Story name="两张预览">
-    <PhotoProvider>
-      <ImageList>
-        {photoImages.map((item, index) => (
-          <PhotoConsumer key={index} src={item}>
-            {index < 2 ? <ViewBox viewImage={item} /> : undefined}
-          </PhotoConsumer>
-        ))}
-      </ImageList>
-    </PhotoProvider>
-  </Story>
-</Preview>
-
 ## 通过按钮触发
 
 <Preview>
@@ -73,7 +58,7 @@ import {
           <Button>无默认图</Button>
         </PhotoConsumer>
       </PhotoProvider>
-      <PhotoProvider brokenElement={<DefaultImage src="default-photo.svg" />}>
+      <PhotoProvider brokenElement={<DefaultImage src={defaultPhoto} />}>
         <PhotoConsumer src="">
           <Button>自定义默认图</Button>
         </PhotoConsumer>
@@ -90,6 +75,22 @@ import {
   </Story>
 </Preview>
 
+## 两张预览
+
+<Preview>
+  <Story name="两张预览">
+    <PhotoProvider>
+      <ImageList>
+        {photoImages.map((item, index) => (
+          <PhotoConsumer key={index} src={item}>
+            {index < 2 ? <ViewBox viewImage={item} /> : undefined}
+          </PhotoConsumer>
+        ))}
+      </ImageList>
+    </PhotoProvider>
+  </Story>
+</Preview>
+
 # Props
 
 ### PhotoProvider