hygraph / react-image Goto Github PK
View Code? Open in Web Editor NEWUniversal lazy-loading, auto-compressed images with React and GraphCMS
Universal lazy-loading, auto-compressed images with React and GraphCMS
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.
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!
This is not working.
code snippet:
<GraphImg
withWebp
key={service.image.handle}
alt={service.title}
image={service.image.handle}
className="w-full"
/>
GatsbyJS
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>
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 ๐
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.
Similar to the management-sdk which we should switch this to tsdx so we have a unified setup/process for open source libs.
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
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!
Similar to gatsby-source-graphcms
we should configure automated publishing.
Link for You can read more about resizing
in props fit returns 404 page
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.
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.
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=""
/>
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.
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/>
}
GraphCMS will soon update the asset domain from media.graphcms.com
to media.graphassets.com
.
Pull request: #37
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.