Fix cms-kontent example Next/Image domain error

examples/cms-kontent/components/avatar.js

@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from '../components/image'
 
 export default function Avatar({ name, picture }) {
   return (

examples/cms-kontent/components/cover-image.js

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import Image from 'next/image'
+import Image from '../components/image'
 import Link from 'next/link'
 
 export default function CoverImage({ title, src, slug }) {

examples/cms-kontent/components/image.js

@@ -0,0 +1,32 @@
+import NextImage from 'next/image'
+import { transformImageUrl } from '@kentico/kontent-delivery'
+
+const KONTENT_ASSET_HOSTNAME_REGEX = /.kc-usercontent.com$/
+
+const getLoader = (src) => {
+  return srcIsKontentAsset(src) ? kontentImageLoader : undefined
+}
+
+const srcIsKontentAsset = (src) => {
+  try {
+    const { hostname } = new URL(src)
+    return KONTENT_ASSET_HOSTNAME_REGEX.test(hostname)
+  } catch {
+    return false
+  }
+}
+
+const kontentImageLoader = ({ src, width, quality = 100 }) => {
+  return new transformImageUrl(src)
+    .withWidth(width)
+    .withQuality(quality)
+    .withCompression('lossless')
+    .withAutomaticFormat()
+    .getUrl()
+}
+
+export default function Image(props) {
+  const loader = getLoader(props.src)
+
+  return <NextImage {...props} loader={loader} />
+}