82a9d21809
* Fixes the following error in the `cms-kontent` example by implementing
an `Image` component to wrap `Next/Image` with a custom loader.
```
Invalid src prop ... hostname "assets-eu-01.kc-usercontent.com" is not configured under images in your `next.config.js`
```
* This error is affecting both the `pages/index.js` and
`pages/posts/[slug].js` routes.
* Uses a custom loader rather than adding the Kontent asset domains to
`next.config.js` as we can transform the images using the Kontent
Delivery API directly rather than delegating this to the Next app web
server.
Ref:
* https://nextjs.org/docs/messages/next-image-unconfigured-host
* https://nextjs.org/docs/basic-features/image-optimization
* https://meeg.dev/blog/using-the-next-image-component-with-kentico-kontent-assets
* b7c9ef588c/components/Image.js
* https://kontent.ai/learn/reference/image-transformation/
17 lines
406 B
JavaScript
17 lines
406 B
JavaScript
import Image from '../components/image'
|
|
|
|
export default function Avatar({ name, picture }) {
|
|
return (
|
|
<div className="flex items-center">
|
|
<div className="w-12 h-12 relative mr-4">
|
|
<Image
|
|
src={picture}
|
|
layout="fill"
|
|
className="rounded-full"
|
|
alt={name}
|
|
/>
|
|
</div>
|
|
<div className="text-xl font-bold">{name}</div>
|
|
</div>
|
|
)
|
|
}
|