scaleflex / react-cloudimage-responsive Goto Github PK

If we try to use it causes an error

Due to lazy loading some components, we can't use a global provider for react-cloudimage-responsive are started wrapping a few lazy-loaded screens with the provider instead.
We are currently getting a memory leak warning from react when the component unmounts, as the resize handler isn't removed here : https://github.com/scaleflex/react-cloudimage-responsive/blob/master/src/provider.js

For our own needs we just subclassed the provider and added a componentWillUnmount method to remove the event listener.

class UnloadableCloudimageProvider extends CloudimageProvider {
  componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions);
  }
}

This should probably be integrated natively into the library.

Hi

Just updated to version 3.0.3 (from v1.6) and it appears that lazyLoaded images are no longer lazy loading?

This is evident in the codesandbox example when viewing the Network tab in Chrome DevTools: https://codesandbox.io/s/react-cloudimage-responsive-example-q64n3

Thanks

I have had to workaround this for now, but I would recommend looking at the user agent and allowing that to make a good prediction of max widths that can be updated when the image is rendered in the frontend

I'm testing your plugin for production use in my company running

react 17.0.2 in React.StrictMode

Wich is giving me warnings about your use of unsafe live cycle methods and the deprecated findDOMNode.

I would like to ask you, if you are planning to switch to functional components and/or refactor to in favor of using ref instead findDOMNode anytime soon?

I otherwise like your plugin very much and I do think it performs quite nice.

I believe the definition in index.d.ts should be as follows

    doNotReplaceURL?: boolean;

Hello,

I have just installed react-cloudimage-responsive with npm but I get this error:

client.js:196 ./node_modules/react-cloudimage-responsive/dist/polyfills.jsModule not found: Error: Can't resolve 'core-js/es/math/trunc' in '/Users/me/Documents/code/projects/sanity-gatsby-portfolio/web/node_modules/react-cloudimage-responsive/dist'./node_modules/react-cloudimage-responsive/dist/polyfills.jsModule not found: Error: Can't resolve 'core-js/features/array/find' in '/Users/me/Documents/code/projects/sanity-gatsby-portfolio/web/node_modules/react-cloudimage-responsive/dist'./node_modules/react-cloudimage-responsive/dist/polyfills.jsModule not found: Error: Can't resolve 'core-js/features/array/for-each' in '/Users/me/Documents/code/projects/sanity-gatsby-portfolio/web/node_modules/react-cloudimage-responsive/dist'

This is what I got from the terminal upon install:
`

[email protected] postinstall /Users/me/Documents/code/projects/sanity-gatsby-portfolio/web/node_modules/react-cloudimage-responsive/node_modules/core-js
node -e "try{require('./postinstall')}catch(e){}"

• [email protected]
  added 4 packages from 4 contributors and audited 23377 packages in 21.045s
  found 8 vulnerabilities (2 low, 2 moderate, 4 critical)
  run npm audit fix to fix them, or npm audit for details
  `

I am using React 16.8.6.

Any idea of how to solve this? Thanks!

Hello, trying to set this up but on every request I receive a "Missing origin image" placeholder image returned. Weirdly if I manually remove the v7/ from the request url the image loads fine. I have whitelisted the CDN domain (imagekit) but still not working

Example request url: https://[token].cloudimg.io/v7/https://ik.imagekit.io/[token]/scotch-and-soda/icon-example_SU4CY5Eds.webp?w=3200&org_if_sml=1

Any ideas what I"m doing wrong?

Hi,

I am a customer, and i recently switched from Imagekit to yours, specially for this plugin. I am very impressed with what you are trying to do here but what i am seeing is something not normal. Now considering the ratio is kept at 1.5, what i am seeing is that the image being loaded for smaller viewports (500px and below), is way too high, such as it renders a 1600px wide photo for a container of 400px.

I don't think this is a "responsive" behavior. That's a huge hit to the bandwidth if am downloading 400kb files on a phone, not to mention, a toll on overall speed. Most people are mobile oriented and lighthouse seemed to be the first to bring it to my notice. Please check.

Note: i am using Galaxy S5 and Pixel 2xl as models using browser responsive inspector to check which image is loaded for which viewport. I am using the latest version, with Next JS latest version (11.1.0 as of now)

It would be nice to be able to disable lazy loading or provide further lazy loading configuration on a per component basis.

e.g. I have a drawer on the side of my application that loads a list of images. This drawer scrolls independently from the main part of the application, which means that the lazy load images don't render. The only way to fix this currently would be to disable lazy loading for all images, which is not ideal. Alternatively, if I could set scrollContainer (as is possible in react-lazyload) then I could also fix this issue, but there is no property to pass this config through

When I import react-cloud-image into my typescript react project.
import { CloudimageProvider } from "react-cloudimage-responsive";
I get this issue.

import "./polyfills";
       ^^^^^^^^^^^^^

SyntaxError: Unexpected string
    at Module._compile (internal/modules/cjs/loader.js:743:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:810:10)
    at Module.load (internal/modules/cjs/loader.js:666:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:606:12)
    at Function.Module._load (internal/modules/cjs/loader.js:598:3)
    at Module.require (internal/modules/cjs/loader.js:705:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at Object.react-cloudimage-responsive (/Users/kraiba/projects/proggie/eventera.co/frontend/.next/dist/bundles/pages/index.js:1550:18)
    at __webpack_require__ (/Users/kraiba/projects/proggie/eventera.co/frontend/.next/dist/bundles/pages/index.js:23:31)
    at Object../src/components/views/HeroBanner/index.tsx (/Users/kraiba/projects/proggie/eventera.co/frontend/.next/dist/bundles/pages/index.js:1151:86)
    at __webpack_require__ (/Users/kraiba/projects/proggie/eventera.co/frontend/.next/dist/bundles/pages/index.js:23:31)
    at Object../src/components/views/EventWithFilters.tsx (/Users/kraiba/projects/proggie/eventera.co/frontend/.next/dist/bundles/pages/index.js:1059:70)
    at __webpack_require__ (/Users/kraiba/projects/proggie/eventera.co/frontend/.next/dist/bundles/pages/index.js:23:31)
    at Object../src/components/containers/Events.tsx (/Users/kraiba/projects/proggie/eventera.co/frontend/.next/dist/bundles/pages/index.js:357:82)
    at __webpack_require__ (/Users/kraiba/projects/proggie/eventera.co/frontend/.next/dist/bundles/pages/index.js:23:31)
    at Object../pages/index.tsx (/Users/kraiba/projects/proggie/eventera.co/frontend/.next/dist/bundles/pages/index.js:85:92)
(node:39186) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:39186) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
{ /Users/kraiba/projects/proggie/eventera.co/frontend/node_modules/react-cloudimage-responsive/dist/index.js:15
import "./polyfills";```
       ^^^^^^^^^^^^^  

Dev information:

• Next.js: 9.1.2 (SSR)
• React: 16.11.0
• react-cloudimage-responsive: 1.6.7

Is it possible to do art direction with Cloudimage?

I have two master images one in portrait mode and the other in landscape:

http://metamn.io/beat/assets/images/bohen-portrait_tablet2x.png 1200x1600px ratio=0.75
http://metamn.io/beat/assets/images/bohen-landscape_desktop2x.png 1920x1080px ration = 1.78

I would like to display the portrait image for devices in portrait mode and the landscape image for devices in landscape mode.

These images are mainly responsive website screenshots, ie. they can be completely different. Many websites display a completely different content and layout for these two different modes. The classic art direction solution to crop the center of the image is cannot be used here.

In the past that was easy with the <picture> element:

<picture class="picture">
        <source
          media="(min-width: 1600px)"
          data-srcset="http://metamn.io/beat/assets/images/bohen-landscape_desktop.png, http://metamn.io/beat/assets/images/bohen-landscape_desktop2x.png 2x"
          srcset="http://metamn.io/beat/assets/images/bohen-landscape_desktop.png, http://metamn.io/beat/assets/images/bohen-landscape_desktop2x.png 2x"
        />
        <source
          media="(min-width: 1024px)"
          data-srcset="http://metamn.io/beat/assets/images/bohen-landscape_laptop.png, http://metamn.io/beat/assets/images/bohen-landscape_laptop2x.png 2x"
          srcset="http://metamn.io/beat/assets/images/bohen-landscape_laptop.png, http://metamn.io/beat/assets/images/bohen-landscape_laptop2x.png 2x"
        />
        <source
          media="(min-width: 600px)"
          data-srcset="http://metamn.io/beat/assets/images/bohen-portrait_tablet.png, http://metamn.io/beat/assets/images/bohen-portrait_tablet2x.png 2x"
          srcset="http://metamn.io/beat/assets/images/bohen-portrait_tablet.png, http://metamn.io/beat/assets/images/bohen-portrait_tablet2x.png 2x"
        />
        <source
          media="(max-width: 599px)"
          data-srcset="http://metamn.io/beat/assets/images/bohen-portrait_mobile.png, http://metamn.io/beat/assets/images/bohen-portrait_mobile2x.png 2x"
          srcset="http://metamn.io/beat/assets/images/bohen-portrait_mobile.png, http://metamn.io/beat/assets/images/bohen-portrait_mobile2x.png 2x"
        />
        <img
          class="img lazy img--loaded loaded"
          data-src="http://metamn.io/beat/assets/images/bohen-landscape_laptop.png"
          alt="Bohen"
          src="http://metamn.io/beat/assets/images/bohen-landscape_laptop.png"
          data-was-processed="true"
        />
      </picture>

My question is that can I use Cloudimage's elegant <Img src="img.jpg" alt="Demo image" ratio={1.5} /> solution or should I do everything manually like explained in https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/dev-implementation/manual-implementation

Is there any way to detect the image failed to load or loaded the placeholder image? I'd like to fire off a function when this happens to rebuild the image.

Hi, I have installed your react library, but I'm getting the version conflict for babel-loader from your dependencies (v7.x.x) and react-scripts dependencies (v8.x.x), so I can't run the app.

Please update the dependencies, thanks!

Is it possible to use this library to load a background image?

If so, how would I accomplish that? I would like a dynamically-resized background image.

We're seeing the follow error in development when using the lazyLoading property on <Img /> tags.

Warning: React does not recognize the `lazyLoading` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `lazyloading` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at img
    at div

The simplified version of the code looks like the following:

import Img from 'react-cloudimage-responsive'

<Img ratio={1.0} src={url} params={{ gravity: 'auto' }} lazyLoading={false} />

I've created a super basic codesandbox.io sample to show the issue. You'll have to put your own token in the token field for it to actually show the image. Once it's loaded, open the codesandbox console and you'll see the same React warning.

https://codesandbox.io/s/cool-currying-cdvqu?file=/src/App.js

I want to know if React Plugin will work and have not issue when use Next Js to make Server Rendering. Since on Server doesnt exist a Window to calculate image sizes can get an issue during pics shown.
Or if there any solution when do Server Rendering?

Hi team,

Is it possible to tell the library to use a particular image / gif while the image is loading?
What would you recommend me to do in order to achieve that?
Currently I can see in your code cloudimageUrl and previewCloudimageUrl seem to use the same imgSrc.