rsnext/examples/cms-strapi/components/avatar.js
Mileta Dulović f343410773
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.
2020-06-12 01:48:27 +00:00

16 lines
427 B
JavaScript

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