From f3434107734de885d1eba9e3863cd0606ef5f868 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mileta=20Dulovi=C4=87?= <dulovicmileta1@gmail.com>
Date: Fri, 12 Jun 2020 03:48:27 +0200
Subject: [PATCH] Fixed Avatar.js component where Strapi CMS would fail when
 fetching an 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 | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples/cms-strapi/components/avatar.js b/examples/cms-strapi/components/avatar.js
index 1ca4be7999b5b..b30910865b3fd 100644
--- a/examples/cms-strapi/components/avatar.js
+++ b/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}
       />