modified image component

src/app/core/util/cropImage.js

+const cropImage = (src, width, height, crop = true) => {
+  if (src.indexOf('picsum.photos') > -1) return src;
+
+  if (width || height) {
+    src += src.includes('?') ? '&' : '?';
+
+    if (width) {
+      src += 'width=' + width;
+    }
+
+    if (height) {
+      if (width) {
+        src += '&';
+      }
+      src += 'height=' + height;
+    }
+
+    if (crop && width && height) {
+      src += '&fit=crop';
+    }
+  }
+
+  return src;
+};
+
+export default cropImage;

src/app/features/image/components/Image.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-//import { hot } from 'react-hot-loader';
-import { getWebPImageUri, resizeImageUri } from '~/core/util/helpers';
 
-export const CaptionStyled = styled.figcaption`
-  /* styled component */
-`;
-/*eslint-disable no-unused-vars*/
-//this component could be tested, with maxWIdth etc. in imgProps
-const Image = styled(
-  ({
-    src,
-    alt,
-    caption,
-    className = '',
-    imgProps = {},
-    children,
-    ...props
-  }) => {
-    className = 'Image ' + className;
-    let formattedSrc = getWebPImageUri(src);
-    let w = imgProps.maxWidth || 0;
-    let h = imgProps.maxHeight || 0;
-    //set max width/height for the image from the api
-    //this would be a good test
-    if (w > 0 && h <= 0) {
-      formattedSrc = resizeImageUri(formattedSrc, false, w);
-    } else if (w <= 0 && h > 0) {
-      formattedSrc = resizeImageUri(formattedSrc, h, false);
-    } else if (w > 0 && h > 0) {
-      formattedSrc = resizeImageUri(formattedSrc, h, w);
-    }
-    //do not want to set these as attributes on the element so delete them...
-    delete imgProps.maxWidth;
-    delete imgProps.maxHeight;
-    return (
-      <div className={className} {...props}>
-        <img src={formattedSrc} alt={alt} {...imgProps} />
-        {caption && <CaptionStyled>{caption}</CaptionStyled>}
-        {children}
-      </div>
-    );
-  }
-)`
-  img {
-    display: block;
-    width: 100%;
-  }
+import cropImage from '~/core/util/cropImage';
 
-  figcaption {
-    position: relative;
-    display: block;
-    float: right;
-    padding-left: 10px;
+// import ImageStyled from '../components.styled/Image.styled';
 
-    &:before {
-      content: '/';
-      position: absolute;
-      left: 0;
-      color: cyan;
-      text-decoration: none;
-      display: inline-block;
-    }
+const Image = ({ className, image, crop = true, height, width }) => {
+  if (!image && !image.asset) {
+    return null;
   }
-`;
+
+  let src = cropImage(image.asset.sys.uri, width, height, crop);
+
+  const altText = image.altText
+    ? image.altText
+    : image.caption
+    ? image.caption
+    : image.asset.title;
+
+  return <img src={src} alt={altText} className={className} />;
+};
 
 Image.propTypes = {
-  src: PropTypes.string.isRequired,
-  alt: PropTypes.string,
-  caption: PropTypes.string,
+  image: PropTypes.object,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  crop: PropTypes.bool,
   className: PropTypes.string,
-  imgProps: PropTypes.object,
-  children: PropTypes.node,
 };
 
-Image.defaultProps = {};
-
 export default Image;

src/app/pages/blog/BlogComposer.js

@@ -16,16 +16,7 @@ const BlogComposer = ({ fields }) => {
       }
       case 'image': {
         if (!field.value.asset) return null;
-        return (
-          <Image
-            key={`image-${idx}`}
-            src={
-              field.value.asset &&
-              field.value.asset.sys &&
-              field.value.asset.sys.uri
-            }
-          />
-        );
+        return <Image key={`image-${idx}`} image={field.value} />;
       }
       case 'codeExample': {
         const codeExamples = field.value.example.map((snippet, index) => {