Fixed Avatar.js component where Strapi CMS would fail when fetching a…

…n image (#14084)

I tried creating CMS with ```Strapi``` by following [this README.MD](https://github.com/M1ck0/next.js/tree/canary/examples/cms-strapi). After configuring everything I noticed that app isn't working.

This is error that occured on ```yarn dev```

![image](https://user-images.githubusercontent.com/19279947/84417177-8d1cff80-ac15-11ea-942a-4acf9b9b8bcb.png)

After logging data that is sent to ```<Avatar/>``` component I noticed that ```picture``` is actually an ```Array```.

![image](https://user-images.githubusercontent.com/19279947/84417337-c05f8e80-ac15-11ea-9cf5-a6890bc1744b.png)

After modifying code bellow everything works as it should and CMS works properly.

examples/cms-strapi/components/avatar.js

@@ -1,12 +1,12 @@
 export default function Avatar({ name, picture }) {
+  const url = picture.url ?? picture[0].url
+
   return (
     <div className="flex items-center">
       <img
         src={`${
-          picture.url.startsWith('/')
-            ? process.env.NEXT_PUBLIC_STRAPI_API_URL
-            : ''
-        }${picture.url}`}
+          url.startsWith('/') ? process.env.NEXT_PUBLIC_STRAPI_API_URL : ''
+        }${url}`}
         className="w-12 h-12 rounded-full mr-4 grayscale"
         alt={name}
       />