fix stories for react-image, use images from CDN (#15545)

Author: layershifter

change/@fluentui-react-image-2020-10-16-10-32-13-fix-image-stories.json

@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "fix stories for `react-image`, use images from CDN",
+  "packageName": "@fluentui/react-image",
+  "email": "[email protected]",
+  "dependentChangeType": "none",
+  "date": "2020-10-16T08:32:13.798Z"
+}

packages/react-examples/src/react-image/Image.stories.scss packages/react-examples/src/react-image/Image/Image.stories.scss

@@ -13,31 +13,97 @@ const Stack = (props: React.PropsWithChildren<{ horizontal?: boolean }>) => {
 
 export const ImageAppearanceShape = () => (
   <Stack horizontal>
-    <Image alt="Ade's avatar" src="images/avatar/ade.jpg" height={200} width={200} />
-    <Image alt="Chris's avatar" rounded src="images/avatar/chris.jpg" height={200} width={200} />
-    <Image alt="Laura's avatar" circular src="images/avatar/laura.jpg" height={200} width={200} />
+    <Image
+      alt="Ade's avatar"
+      src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/large/ade.jpg"
+      height={200}
+      width={200}
+    />
+    <Image
+      alt="Chris's avatar"
+      rounded
+      src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/large/chris.jpg"
+      height={200}
+      width={200}
+    />
+    <Image
+      alt="Laura's avatar"
+      circular
+      src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/large/laura.jpg"
+      height={200}
+      width={200}
+    />
   </Stack>
 );
 
 export const ImageVariationsBorder = () => (
   <Stack horizontal>
     <Stack horizontal>
-      <Image alt="Ade's avatar" src="images/avatar/ade.jpg" height={200} width={200} />
-      <Image alt="Chris's avatar" rounded src="images/avatar/chris.jpg" height={200} width={200} />
-      <Image alt="Laura's avatar" circular src="images/avatar/laura.jpg" height={200} width={200} />
+      <Image
+        alt="Ade's avatar"
+        src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/large/ade.jpg"
+        height={200}
+        width={200}
+      />
+      <Image
+        alt="Chris's avatar"
+        rounded
+        src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/large/chris.jpg"
+        height={200}
+        width={200}
+      />
+      <Image
+        alt="Laura's avatar"
+        circular
+        src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/large/laura.jpg"
+        height={200}
+        width={200}
+      />
     </Stack>
     <Stack horizontal>
-      <Image alt="Ade's avatar" bordered src="images/avatar/ade.jpg" height={200} width={200} />
-      <Image alt="Chris's avatar" bordered rounded src="images/avatar/chris.jpg" height={200} width={200} />
-      <Image alt="Laura's avatar" bordered circular src="images/avatar/laura.jpg" height={200} width={200} />
+      <Image
+        alt="Ade's avatar"
+        bordered
+        src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/large/ade.jpg"
+        height={200}
+        width={200}
+      />
+      <Image
+        alt="Chris's avatar"
+        bordered
+        rounded
+        src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/large/chris.jpg"
+        height={200}
+        width={200}
+      />
+      <Image
+        alt="Laura's avatar"
+        bordered
+        circular
+        src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/large/laura.jpg"
+        height={200}
+        width={200}
+      />
     </Stack>
   </Stack>
 );
 
 export const ImageVariationsFallback = () => (
   <Stack horizontal>
-    <Image alt="Ade's avatar" bordered src="images/avatar/ade.jpg" height={200} width={200} />
-    <Image alt="Non-existing avatar" bordered src="images/avatar/non-existing-png.jpg" height={200} width={200} />
+    <Image
+      alt="Ade's avatar"
+      bordered
+      src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/large/ade.jpg"
+      height={200}
+      width={200}
+    />
+    <Image
+      alt="Non-existing avatar"
+      bordered
+      src="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/large/non-existing-png.jpg"
+      height={200}
+      width={200}
+    />
   </Stack>
 );