hygraph/react-image

Universal lazy-loading, auto-compressed images with React and GraphCMS

react-image's Issues

WebP support check doesn't pass for Firefox

The current implementation of the webp check doesn't work for Firefox, although it has had support since version 65: https://github.com/GraphCMS/graphcms-image/blob/master/src/index.js#L23-L37

Why? Firefox doesn't support webp in data-urls yet. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

Chrome also supports the image/webp type.

• Relevant bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1559743
• Vercel handles check on server side: https://github.com/vercel/next.js/blob/canary/packages/next/next-server/server/image-optimizer.ts#L46
• Alternate approach (async!): https://stackoverflow.com/a/54120785/684032

Did you purposely choose the sync approach? How about handling the detection server-side? I'm not sure if the media assets server GraphCMS uses is open source and/or supports this!?

Thanks for making GraphCMS!

Not working anymore

This is not working.
code snippet:

<GraphImg
withWebp
key={service.image.handle}
alt={service.title}
image={service.image.handle}
className="w-full"
/>

GatsbyJS

height collapses before blurry placeholder loads

gif of symptoms below. Not sure if this has to do with SSR or not.

I'm using nextjs w/ Apollo, calling image with dimensions of 576x576 like so:

const Image = (props: Props) =>
    typeof window !== 'undefined'
        && 
     // as far as i can tell this container is required b/c the image is
     // positioned absolutely
     <div
              style={{
                  position: 'relative',
                  minHeight: 500,
                  maxWidth: 600
              }}
          >
              <GraphImage
                  image={props.image}
                  alt={props.alt}
                  maxWidth={600}
              />
          </div>

SVG support?

Hi there 👋

what's the current state of SVG support? It looks like graphcms-image doesn't support SVGs coming from the CMS since the width and height will be 0. And even if I set the width and height to something, it will request the image with options that are not supported for SVGs, such as: https://media.graphcms.com/resize=w:20,h:20,fit:crop/blur=amount:2/compress/12345567

If you don't plan to support SVGs I think it would be a good idea to mention that in the README 😄

SSR errors w/ intersection observer

I was trying to test this out w/ my nextjs project, but I keep running up against this error:

ReferenceError: window is not defined
    at Object.<anonymous> (/mnt/c/Users/brand/code/admitbrain/node_modules/intersection-observer/intersection-observer.js:724:3)
    at Module._compile (module.js:641:30)
    at Module._compile (/mnt/c/Users/brand/code/admitbrain/node_modules/source-map-support/source-map-support.js:492:25)
    at Object.Module._extensions..js (module.js:652:10)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)
    at Module.require (module.js:585:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/mnt/c/Users/brand/code/admitbrain/node_modules/graphcms-image/index.js:7:1)
    at Module._compile (module.js:641:30)
    at Module._compile (/mnt/c/Users/brand/code/admitbrain/node_modules/source-map-support/source-map-support.js:492:25)
    at Object.Module._extensions..js (module.js:652:10)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)
    at Module.require (module.js:585:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/mnt/c/Users/brand/code/admitbrain/components/Image/Image.js:5:1)
    at Module._compile (module.js:641:30)
    at Module._compile (/mnt/c/Users/brand/code/admitbrain/node_modules/source-map-support/source-map-support.js:492:25)
    at Object.Module._extensions..js (module.js:652:10)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)
    at Module.require (module.js:585:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/mnt/c/Users/brand/code/admitbrain/.next/dist/components/Image/index.js:7:14)
    at Module._compile (module.js:641:30)
    at Module._compile (/mnt/c/Users/brand/code/admitbrain/node_modules/source-map-support/source-map-support.js:492:25)
    at Object.Module._extensions..js (module.js:652:10)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)
    at Module.require (module.js:585:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/mnt/c/Users/brand/code/admitbrain/pages/blog-post-template.js:17:1)
    at Module._compile (module.js:641:30)
    at Module._compile (/mnt/c/Users/brand/code/admitbrain/node_modules/source-map-support/source-map-support.js:492:25)
    at Object.Module._extensions..js (module.js:652:10)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)
    at Module.require (module.js:585:17)
    at require (internal/module.js:11:18)
    at _callee$ (/mnt/c/Users/brand/code/admitbrain/node_modules/next/dist/server/require.js:33:46)
    at tryCatch (/mnt/c/Users/brand/code/admitbrain/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:65:40)
    at Generator.invoke [as _invoke] (/mnt/c/Users/brand/code/admitbrain/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:299:22)
    at Generator.prototype.(anonymous function) [as next] (/mnt/c/Users/brand/code/admitbrain/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:117:21)
    at step (/mnt/c/Users/brand/code/admitbrain/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /mnt/c/Users/brand/code/admitbrain/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13
    at <anonymous>

I'm calling it in my code via:

const Image = (props: Props) =>
    typeof window !== 'undefined'
      && <div
              style={{
                  position: 'relative',
                  minHeight: 500,
                  maxWidth: 600
              }}
          >
              <GraphImage
                  image={props.image}
                  alt={props.alt}
                  maxWidth={600}
              />
          </div>

The error only throws on the server, and the image appears to load fine once in the client.

Switch to tsdx

Similar to the management-sdk which we should switch this to tsdx so we have a unified setup/process for open source libs.

Bug in srcset

It seems the srcset is defaulting to crop instead of what the I passed in.

How I used Graphcms-image:
<GraphImg image={Carousel.sale} maxWidth={500} withWebp={true} fit="clip"/>

and whats produced in the DOM is:
<img alt title srcset = "https://media.graphcms.com/resize=w:125,fit:crop/output=format:webp /compress/uX62fSseS7KunpogTBJe 125w, https://media.graphcms.com/resize=w:250,fit:crop/output=format:webp /compress/uX62fSseS7KunpogTBJe 250w, https://media.graphcms.com/resize=w:500,fit:crop/output=format:webp /compress/uX62fSseS7KunpogTBJe 500w, https://media.graphcms.com/resize=w:600,fit:crop/output=format:webp /compress/uX62fSseS7KunpogTBJe 600w" src="https://media.graphcms.com/resize=w:600,h:600,fit:clip/output=format:webp /compress/uX62fSseS7KunpogTBJe" sizes="(max-width: 500px) 100vw, 500px" style="position: absolute; top: 0px; left: 0px; transition-duration: 0.5s; transition-timing-function: initial; transition-property: opacity; opacity: 1; width: 100%; height: 100%; object-fit: cover; object-position: center center;">

I'm using GraphCMS image version 1.1.0-beta3

`style.width` required?

The way styles are setup, it seems like style.width, or applying a class with scalar width, is required to make this component display correctly. Am I understanding this? If I am correct, I am happy to PR a README update that clarifies how this component must be used. Thanks!

Add automated publishing workflow

Similar to gatsby-source-graphcms we should configure automated publishing.

Link in README is broken

Link for You can read more about resizing in props fit returns 404 page

style prop is applied to graphcms-image-wrapper, not to inner img element

It seems styles are applied to the outer div element with class graphcms-image-wrapper instead of the inner image element. While it can be convenient to abstract the fact that the image is wrapped inside a container by the component, it does not allow users to set styles properties on the image, such as object-position or object-fit for instance.

lazy-loading and fade still happen on subsequent mounts with Gatsby

Observing lazing-loading and fading after subsequent mounts with Gatsby v2.
Here is a test project.
You will have to come up with your own API URL to make this project run.

The first image is a plain img tag with data from a StaticQuery component, second is GrapgCMS-image from the same data source. The 3rd gets data from Apollo Client. This issue doesn't seem to effect a CRA project.

Can i remove the default inline style that comes with the GraphImg tag?

I had an img tag that i ald styled to look great, and it worked perfectly. But now that i want to integrate the image optimization, the styling is now all wrong. The graphcms-image tag comes with lots of builtin inline style. Please tell me how i can remove these inline style. so that my the graphImg tag will only use my className attribute.
Here's my img tag:

<img 
  src={data[1][0].node.photo ? data[1][0].node.photo.url : NotFound } 
  className="img-fluid rounded-circle img-small" 
  alt=""
/>
<GraphImg 
  image={data[1][0].node.photo ? data[1][0].node.photo : NotFound} 
  blurryPlaceholder={true} 
  className="img-fluid rounded-circle img-small" 
  alt=""
/>

height parameter missing in srcset

If an image should be cropped, the output is correct on the src attribute, see: w:3572,h:714 in the example below.
In the srcset the urls do not have a height, see w:893 in the example below.

<img 
alt="" 
title="" srcset="https://media.graphcms.com/resize=w:893,fit:crop/output=quality:95,strip:true/sharpen=amount:1/auto_image/compress/Q5aVZCmpSB29FhCL9O2R 893w,https://media.graphcms.com/resize=w:1786,fit:crop/output=quality:95,strip:true/sharpen=amount:1/auto_image/compress/Q5aVZCmpSB29FhCL9O2R 1786w,
https://media.graphcms.com/resize=w:3572,fit:crop/output=quality:95,strip:true/sharpen=amount:1/auto_image/compress/Q5aVZCmpSB29FhCL9O2R 3572w"
src="https://media.graphcms.com/resize=w:3572,h:714,fit:crop/output=quality:95,strip:true/sharpen=amount:1/auto_image/compress/Q5aVZCmpSB29FhCL9O2R" 
sizes="(max-width: 3572px) 100vw, 3572px" style="position: absolute; top: 0px; left: 0px; transition-duration: 0.5s; transition-timing-function: ease; transition-property: opacity; opacity: 1; width: 100%; height: 100%; object-fit: cover; object-position: center center;">

The goal is to have consistent aspect ratios in the src and srcset images.

Cannot convert external URLs when apikey is not provided

I get the error message Cannot convert external URLs when apikey is not provided. How can I add my apiKey or is it even possible to call the image without a key?

export const BlogImg = (props) => {
  console.log(props)
  const { src, img } = props;
  const asset = {
    handle: src,
    width: img.width,
    height: img.height
  }

  return <Img image={asset} maxWidth={800} alt={src.alt} fadeIn/>
}

Update baseURI from to 'media.graphassets.com'

GraphCMS will soon update the asset domain from media.graphcms.com to media.graphassets.com.

Pull request: #37

React 17 compatibility

I'm working on a PR that implements this component, and it works well. However, React 17 isn't allowed with the current peerDependency settings: https://github.com/GraphCMS/react-image/blob/main/package.json#L41-L42

It would be nice if React 17 were allowed as well. From my testing it seems to be compatible.