Improview

components/post/slices/ImageWithCaption/DefaultImage.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import Image from 'next/image'
 import Caption from './Caption'
 
 /**
@@ -12,7 +13,7 @@ const DefaultImage = ({ slice }) => {
  return (
  <div className="post-part single container">
  <div className={`block-img ${slice.slice_label}`}>
- <img src={imageUrl} alt={imageAlt} />
+ <Image src={imageUrl} alt={imageAlt} layout="fill" objectFit="cover"/>
  <Caption caption={caption} />
  </div>
  </div>

components/post/slices/ImageWithCaption/FullWidthImage.js

@@ -1,18 +1,20 @@
 import React from 'react'
+import Image from "next/image"
 import Caption from './Caption'
 
 /**
  * Full width image component
  */
 const FullWidthImage = ({ slice }) => {
  const imageUrl = slice.primary.image.url
+ const imageAlt = slice.primary.image.imageAlt
  const caption = slice.primary.caption
 
  return (
  <div
  className="blog-header single"
- style={{ backgroundImage: `url(${imageUrl})` }}
  >
+ <Image src={imageUrl} alt={imageAlt} layout="fill" objectPosition="top" objectFit="cover"/>
  <div className="wrapper">
  <Caption caption={caption} />
  </div>

next.config.js

@@ -1,9 +1,12 @@
-const path = require("path");
-
-module.exports = {
- target: "serverless",
- webpack(config) {
- config.resolve.modules.push(path.resolve("./"));
- return config;
- }
-};
+const path = require('path')
+
+module.exports = {
+ target: 'serverless',
+ webpack (config) {
+ config.resolve.modules.push(path.resolve('./'))
+ return config
+ },
+ images: {
+ domains: ['images.prismic.io']
+ }
+}