Fixed all the broken image links (#18272)

Author: hetanthakkar

apps/vr-tests/src/stories/FolderCover.stories.tsx

@@ -32,7 +32,9 @@ const FolderCoverWithImage: React.FunctionComponent<IFolderCoverWithImageProps>
 
   return renderFolderCoverWithLayout(folderCover, {
     children: (
-      <img src={`//placehold.it/${Math.round(imageSize.width)}x${Math.round(imageSize.height)}`} />
+      <img
+        src={`//via.placeholder.com/${Math.round(imageSize.width)}x${Math.round(imageSize.height)}`}
+      />
     ),
   });
 };

apps/vr-tests/src/stories/GroupedList.stories.tsx

@@ -7,7 +7,7 @@ import { GroupedList } from '@fluentui/react';
 /* eslint-disable @fluentui/max-len */
 const items = [
   {
-    thumbnail: '//placehold.it/175x175',
+    thumbnail: '//via.placeholder.com/175x175',
     key: 'item-0 nostrud proident, id non',
     name: 'id velit labore ipsum magna',
     description:
@@ -19,7 +19,7 @@ const items = [
     height: 175,
   },
   {
-    thumbnail: '//placehold.it/229x229',
+    thumbnail: '//via.placeholder.com/229x229',
     key: 'item-1 in sunt sed eiusmod',
     name: 'in Duis dolor ex ut',
     description:
@@ -31,7 +31,7 @@ const items = [
     height: 229,
   },
   {
-    thumbnail: '//placehold.it/195x195',
+    thumbnail: '//via.placeholder.com/195x195',
     key: 'item-2 consectetur ut dolor commodo',
     name: 'adipiscing fugiat officia sunt cillum',
     description:
@@ -43,7 +43,7 @@ const items = [
     height: 195,
   },
   {
-    thumbnail: '//placehold.it/208x208',
+    thumbnail: '//via.placeholder.com/208x208',
     key: 'item-3 pariatur. id qui voluptate',
     name: 'eu ullamco et commodo aliqua.',
     description:

apps/vr-tests/src/stories/Image.stories.tsx

@@ -4,44 +4,44 @@ import * as React from 'react';
 import Screener from 'screener-storybook/src/screener';
 import { FabricDecorator } from '../utilities/index';
 
-const img350x150 = 'http://placehold.it/350x150';
+const img350x150 = 'http://via.placeholder.com/350x150';
 
 const imagePropsFitNone: IImageProps = {
-  src: 'http://placehold.it/500x250',
+  src: 'http://via.placeholder.com/500x250',
   imageFit: ImageFit.none,
   width: 350,
   height: 150,
 };
 
 const imagePropsFitCenter: IImageProps = {
-  src: 'http://placehold.it/800x300',
+  src: 'http://via.placeholder.com/800x300',
   imageFit: ImageFit.center,
   width: 350,
   height: 150,
 };
 
 const imagePropsFitContain: IImageProps = {
-  src: 'http://placehold.it/700x300',
+  src: 'http://via.placeholder.com/700x300',
   imageFit: ImageFit.contain,
 };
 
 const imagePropsFitCover: IImageProps = {
-  src: 'http://placehold.it/500x500',
+  src: 'http://via.placeholder.com/500x500',
   imageFit: ImageFit.cover,
 };
 
 const imagePropsFitCenterContain: IImageProps = {
-  src: 'http://placehold.it/400x400',
+  src: 'http://via.placeholder.com/400x400',
   imageFit: ImageFit.centerContain,
 };
 
 const imagePropsFitCenterCover: IImageProps = {
-  src: 'http://placehold.it/400x400',
+  src: 'http://via.placeholder.com/400x400',
   imageFit: ImageFit.centerCover,
 };
 
 const imagePropsMaximizeFrame: IImageProps = {
-  src: 'http://placehold.it/500x500',
+  src: 'http://via.placeholder.com/500x500',
   imageFit: ImageFit.cover,
   maximizeFrame: true,
 };
@@ -102,15 +102,15 @@ storiesOf('Image', module)
         The image is smaller than the frame, so there is empty space within the frame. The image is
         positioned at the upper left of the frame.
       </Label>
-      <Image {...imagePropsFitNone} src="http://placehold.it/100x100" />
+      <Image {...imagePropsFitNone} src="http://via.placeholder.com/100x100" />
     </div>
   ))
   .addStory('Fit: center, image larger', () => (
     <div>
       <Label>
         The image is larger than the frame, so all sides are cropped to center the image.
       </Label>
-      <Image {...imagePropsFitCenter} src="http://placehold.it/800x300" />
+      <Image {...imagePropsFitCenter} src="http://via.placeholder.com/800x300" />
     </div>
   ))
   .addStory('Fit: center, image smaller', () => (
@@ -119,7 +119,7 @@ storiesOf('Image', module)
         The image is smaller than the frame, so there is empty space within the frame. The image is
         centered in the available space.
       </Label>
-      <Image {...imagePropsFitCenter} src="http://placehold.it/100x100" />
+      <Image {...imagePropsFitCenter} src="http://via.placeholder.com/100x100" />
     </div>
   ))
   .addStory('Fit: contain, image wider', () => (

apps/vr-tests/src/stories/List.stories.tsx

@@ -7,7 +7,7 @@ import { List } from '@fluentui/react';
 /* eslint-disable @fluentui/max-len */
 const items = [
   {
-    thumbnail: '//placehold.it/233x233',
+    thumbnail: '//via.placeholder.com/233x233',
     key: 'item-0 sit Lorem culpa cillum',
     name: 'reprehenderit dolore nulla laborum officia',
     description:
@@ -19,7 +19,7 @@ const items = [
     height: 233,
   },
   {
-    thumbnail: '//placehold.it/210x210',
+    thumbnail: '//via.placeholder.com/210x210',
     key: 'item-1 dolor elit, sit mollit',
     name: 'consectetur ipsum tempor nostrud commodo',
     description:
@@ -31,7 +31,7 @@ const items = [
     height: 210,
   },
   {
-    thumbnail: '//placehold.it/231x231',
+    thumbnail: '//via.placeholder.com/231x231',
     key: 'item-2 dolor reprehenderit id sint',
     name: 'velit nisi aliquip do minim',
     description:
@@ -43,7 +43,7 @@ const items = [
     height: 231,
   },
   {
-    thumbnail: '//placehold.it/158x158',
+    thumbnail: '//via.placeholder.com/158x158',
     key: 'item-3 magna Ut nisi dolor',
     name: 'nostrud in reprehenderit eu anim',
     description:
@@ -55,7 +55,7 @@ const items = [
     height: 158,
   },
   {
-    thumbnail: '//placehold.it/165x165',
+    thumbnail: '//via.placeholder.com/165x165',
     key: 'item-4 nisi proident, in dolore',
     name: 'nostrud Duis aliquip Lorem sunt',
     description:
@@ -67,7 +67,7 @@ const items = [
     height: 165,
   },
   {
-    thumbnail: '//placehold.it/226x226',
+    thumbnail: '//via.placeholder.com/226x226',
     key: 'item-5 mollit elit, ex elit,',
     name: 'nulla ipsum esse Lorem sed',
     description:
@@ -79,7 +79,7 @@ const items = [
     height: 226,
   },
   {
-    thumbnail: '//placehold.it/182x182',
+    thumbnail: '//via.placeholder.com/182x182',
     key: 'item-6 ut irure dolor et',
     name: 'nulla consectetur eiusmod velit sed',
     description:
@@ -91,7 +91,7 @@ const items = [
     height: 182,
   },
   {
-    thumbnail: '//placehold.it/206x206',
+    thumbnail: '//via.placeholder.com/206x206',
     key: 'item-7 non ad consequat. mollit',
     name: 'sint quis in Excepteur enim',
     description:
@@ -103,7 +103,7 @@ const items = [
     height: 206,
   },
   {
-    thumbnail: '//placehold.it/240x240',
+    thumbnail: '//via.placeholder.com/240x240',
     key: 'item-8 enim et aliqua. enim',
     name: 'in commodo dolore ea Duis',
     description:
@@ -115,7 +115,7 @@ const items = [
     height: 240,
   },
   {
-    thumbnail: '//placehold.it/158x158',
+    thumbnail: '//via.placeholder.com/158x158',
     key: 'item-9 reprehenderit minim cillum do',
     name: 'dolore et sed dolore sed',
     description:

apps/vr-tests/src/stories/TeachingBubble.stories.tsx

@@ -19,7 +19,7 @@ storiesOf('TeachingBubble', module)
     () => {
       return (
         <TeachingBubble
-          illustrationImage={{ src: 'http://placehold.it/364x220' }}
+          illustrationImage={{ src: 'http://via.placeholder.com/364x220' }}
           calloutProps={{ directionalHint: DirectionalHint.bottomCenter }}
           isWide={true}
           hasSmallHeadline={true}

apps/vr-tests/src/stories/Tile.stories.tsx

@@ -74,7 +74,7 @@ const DocumentTileWithThumbnail: React.FunctionComponent<IDocumentTileWithThumbn
 
     return (
       <img
-        src={`//placehold.it/${Math.round(imageSize.width)}x${Math.round(imageSize.height)}`}
+        src={`//via.placeholder.com/${Math.round(imageSize.width)}x${Math.round(imageSize.height)}`}
         style={{ display: 'block' }}
       />
     );
@@ -108,7 +108,7 @@ const MediaTileWithThumbnail: React.FunctionComponent<IMediaTileWithThumbnailPro
   function renderBackground(backgroundProps: ITileBackgroundProps) {
     return (
       <img
-        src={`//placehold.it/${Math.round(imageSize.width)}x${Math.round(imageSize.height)}`}
+        src={`//via.placeholder.com/${Math.round(imageSize.width)}x${Math.round(imageSize.height)}`}
         style={{ display: 'block' }}
       />
     );

change/@fluentui-example-data-e95fe32a-22d6-482d-96c8-63eb965034b1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fixed all the broken image links and updated test snapshots",
+  "packageName": "@fluentui/example-data",
+  "email": "hetanthakkar1@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-examples-646a35cc-4d70-4ac4-a832-48a637e65712.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fixed all the broken image links and updated test snapshots",
+  "packageName": "@fluentui/react-examples",
+  "email": "hetanthakkar1@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-experiments-c001823a-225a-44ee-be5f-c6787c179531.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fixed all the broken image links and updated test snapshots",
+  "packageName": "@fluentui/react-experiments",
+  "email": "hetanthakkar1@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/example-data/src/listItems.ts

@@ -25,7 +25,7 @@ export function createListItems(count: number, startIndex: number = 0): IExample
     const size = 150 + Math.round(Math.random() * 100);
 
     return {
-      thumbnail: `//placehold.it/${size}x${size}`,
+      thumbnail: `//via.placeholder.com/${size}x${size}`,
       key: 'item-' + (index + startIndex) + ' ' + lorem(4),
       name: lorem(5),
       description: lorem(10 + Math.round(Math.random() * 50)),