cloudinary / cloudinary-react Goto Github PK

I have opened this issue with the Next.js dev team as well.

You can find the issue here.

I have created a simple example in a throw away repo to try and figure out the problem I am encountering and it can be found here. The README.md has a synopsis of what is happening as well as links to issues & code.

Basically the gist is upon using <Image /> in my Next.js project I am met with an error message & warning from Next.js. I am working on looking at the source code for both projects to see what could be causing this problem on my own but definitely am reading Arabic in some cases. Any assistance that can be provided would be greatly appreciated.

Would be nice if you could preload a Cloudinary image into a modal before opening the modal. Traditionally, you'd do this by using image.onload, but I'm not sure how this is possible with this package.

So when I deploy, I none of the transformations seem to work.

Locally, everything is fine, and I can see the transformations in the generated URL

Hi,

I installed the latest package: "cloudinary-react": "1.0.6" and still have issues with transformations.

The following is working :

<Image publicId={publicId}>
</Image>

When this is not

<Image publicId={publicId}>
        <Transformation width="100" crop="scale" angle="10" />
</Image>

There are no errors in the console.

I just saw the contextTypes cloudinary needs

{ angle: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  audioCodec: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  audioFrequency: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  aspectRatio: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  background: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  bitRate: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  border: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  color: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  colorSpace: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  crop: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  defaultImage: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  delay: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  density: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  duration: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  dpr: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  effect: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  else: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  endIf: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  endOffset: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  fallbackContent: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  fetchFormat: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  format: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  flags: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  gravity: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  height: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  htmlHeight: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  htmlWidth: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  if: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  keyframeInterval: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  offset: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  opacity: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  overlay: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  page: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  poster: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  prefix: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  quality: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  radius: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  rawTransformation: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  size: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  sourceTypes: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  sourceTransformation: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  startOffset: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  streamingProfile: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  transformation: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  underlay: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  variable: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  variables: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  videoCodec: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  videoSampling: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  width: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  x: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  y: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  zoom: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  apiKey: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  apiSecret: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  callback: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  cdnSubdomain: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  cloudName: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  cname: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  privateCdn: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  protocol: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  resourceType: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  responsive: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  responsiveClass: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  responsiveUseBreakpoints: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  responsiveWidth: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  roundDpr: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  secure: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  secureCdnSubdomain: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  secureDistribution: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  shorten: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  type: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  uploadPreset: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  urlSuffix: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  useRootPath: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  version: { [Function: bound checkType] isRequired: [Function: bound checkType] },
  publicId: { [Function: bound checkType] isRequired: [Function: bound checkType] } } 

I'm shocked. Wouldn't it make sense to put them into one "cloudinary" object? I'm wondering why this hasn't already caused conflict issues for people.

Also, there is a bad problem arising due to the way cloudinary core uses baseClone to get a clean copy of the options in conjunction with apollo's server-side-rendering (namely this line: https://github.com/apollographql/react-apollo/blob/master/src/server.ts#L53), since apollo will pass the whole context down to cloudinary, and if there is some non-clonable properties, exceptions are thrown.

So my suggestion is:
put everything cloudinary related to a single context type or multiple, carefully named ones, and only pass these context properties down to cloudinary core to be cloned (f.e. context.cloudinary).

This is my code

import React from 'react';
import {Image, CloudinaryContext, Transformation} from 'cloudinary-react';

class ImageUpload extends React.Component {
  render() {
    return(
      <div>
        <h1>Hello, world!</h1>
        <Image cloudName="demo" publicId="sample" width="300" crop="scale"/>
      </div>
    );
  }
}

export default ImageUpload;

In the console:

Uncaught Error: Cannot find module 'cloudinary-react/lib/components/CloudinaryContext' from 'cloudinary-react/lib/index.js'

But the folder Exists (I'm installed via npm)

What is the problem?

Thanks

Hello!

And thanks for a great library. It's really easy to get up and running with Cloudinary with React without having to depend on third-party components anymore.

I have two issues when using <Image /> and <Transformation />.

The first is I have the components like so:

        <Image
          alt=""
          cloudName="demoCloudinary"
          publicId="apple.jpg"
          width="auto"
          responsive
          secure
        >
          <Transformation
            width="auto"
            dpr="auto"
            crop="fill"
            gravity="face:center"
            placeholder="blank"
            responsive
          />
        </Image>

The props responsive and width="auto" needs to be present on both components. It doesn't work if only specified on either. Not a big issue but it's not documented anywhere which leads to a lot of trail and error when experimenting with other props...

Responsive images work great and it fetches the right size. But my other issue is that when using server-side rendering it renders as <img alt="" src="" react-id="111" /> is there anyway to specify the smallest image size as default?

Right now it's a lot of broken images before the client is fully loaded. I understand it's not easy balance having a first image load/progressive enhance since the client will probably download something before size is calculated which leads to overhead. But some tips how this could be handled and not having broken images would be great!

Hi
After installing npm install, I run npm start and get the following error:

./node_modules/react-redux/es/connect/mapDispatchToProps.js
Module not found: Can't resolve 'redux' in '/Users/denis/Development/photo_album/node_modules/react-redux/es/connect'

What is a reason for this?

I'm using the component in a list, and there may or may not be an image in cloudinary associated with the public ID i'm adding to the component.

Any ideas on how to display a default image instead of showing a broken image on the page.

Thanks

I've noticed in chrome 59 that requestAnimationFrame used in the handleResize method of the Image component throws an illegal invocation error.

handleResize(e) {
  if (this.rqf) return;
  this.rqf = requestAnimationFrame(() => {
    this.rqf = null;
    let newState = this.prepareState();
    if(!Util.isEmpty(newState.url)) {
      this.setState(newState);
    }
  });
}

I believe this is because the native requestAnimationFrame is behind assigned to a custom object when exported.

I've tried using bind and call but they break the tests.

Has anyone else noticed this?

Using: React 15.6.2, Cloudinary-React 1.0.4

Using the React example from the documentation I have the following:

import * as React from 'react';
import { shallow } from 'enzyme';
import {Video, Transformation } from 'cloudinary-react';

it('renders the correct url when transformations are specified', () => {
  const video = shallow(
    <Video
      cloudName="dummy-cloud"
      publicId="dog"
    >
      <Transformation quality="50" />
    </Video>
  );
  console.log(video.debug());
  console.log(video.render().html());
});

The debug output is as follows:

<video>
  <source src="http://res.cloudinary.com/dummy-cloud/video/upload/dog.webm" type="video/webm" />
  <source src="http://res.cloudinary.com/dummy-cloud/video/upload/dog.mp4" type="video/mp4" />
  <source src="http://res.cloudinary.com/dummy-cloud/video/upload/dog.ogv" type="video/ogg" />
  <Transformation quality="50" />
</video>

And the final rendered HTML is like so:

<source src="http://res.cloudinary.com/dummy-cloud/video/upload/dog.webm" type="video/webm">
<source src="http://res.cloudinary.com/dummy-cloud/video/upload/dog.mp4" type="video/mp4">
<source src="http://res.cloudinary.com/dummy-cloud/video/upload/dog.ogv" type="video/ogg">

No sign of the expected q_50 in the URL.

Need to have bit_rate, quality and fades for fading in/out.

It's late and it has been a long day, so I am probably doing something wrong. If so, please put an end to my misery. Otherwise, this is a bug!

Best regards,
Dave

warning "[email protected]" has incorrect peer dependency "react@^15.3.1".

index.js

ReactDOM.render('#div', <CloudinaryContext cloudName="xxxx" fetch_format="auto">
  <App />
</CloudinaryContext>);

App.js, render method

<div>
  <Image publicId="x" width={400} crop="fill" />
</div>

The doesn't have fetch_format=auto applied.

I seem to be having an issue with IE11 crashing when using videos.

For example, simply using something like the following:

<Video
  cloudName="mycloud"
  publicId="samples/elephants"
/>

On IE11 this appears to load then goes to blank screen. Works fine in other browsers and devices.

From the IE Console, it appears the error is Object doesn't support property or method 'assign'

When I use the HTML5 native <video> like the following, it works in IE11:

<video
    src="http://res.cloudinary.com/link/to/my/video"
/>

I have named, eager transformations I've performed on my cloudinary videos. How can I get the video component to render using one of those?

If the container of Image is a value of any decimal-number, the image will not show at all. This could easily be fixed by rounding the width, but currently this library does not do that.

Currently, in one of my containers, it will produce a link link this:

https://res.cloudinary.com/account/image/upload/c_scale,dpr_2.0,f_auto,q_auto,w_143.5/image

Hi,
I am using the Image component inside code that changes its size and is re-rendered multiple times during its life (like changing from single view to multi view and stuff like that).

Thing is, that for every resize the component calls its resize event, which is completely unnecessary for me, and takes huge amount of scripting time (~3 seconds for ~20 images).

Any chance you can add a prop to the Image component to cancel the resize event? I can add a PR myself if you want, just tell me what you think first.

Regards,
Ido

I am getting the following console error when attempting to pass the signUrl prop:

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

My code is pretty simple:

<CloudinaryContext cloudName="myCloudName">
  <Image publicId="myPublicId.jpg" signUrl="true" type="private">
    <Transformation transformation={["K-Watermark-w500"]} />
  </Image>
</CloudinaryContext>

I suspect this is some sort of parsing issue, since the React code is being translated to the DOM as an <img> tag that seems to contain an errant signurl attribute.
<img signurl="true" src="http://res.cloudinary.com/kbi-images/image/private/myPublicId.jpg">

This error seems to prevent any Cloudinary functionality that requires a signed url, such as performing secure image manipulations.

When I add a Transformation to an Image, the equals function deep compares all the props in shouldComponentUpdate. This causes a cycle in React 16 with _owner.

cloudinary-react 1.0.4, React 16.

I will provide a workaround as a PR until there is official support for React 16.

I added the dpr="auto" but no luck still.

<Image publicId={item.meta.image_id} style={{height: '60px'}}>
     <Transformation dpr="auto" effect="grayscale" height="60" crop="scale" />
</Image>

I even used the cloudinary package to generate a URL for background images with dpr flag but it doesn't render nicely on retina displays.

cloudinary.url(props.cloud_image_id, { dpr: 'auto', height: 700, width: 2000, crop: "fill", background: "#000000", effect: "colorize:24"})

However, if I set the dpr="3.0", it works. Any solution or workaround for automatic display detection?

Just curious, I'm seeing a Mixed Content warning in Chrome Dev Tools Console:

Mixed Content: The page at 'https://www.mywebsite.com/' was loaded over HTTPS, 
but requested an insecure video 'http://res.cloudinary.com/mycloudname/video/upload/v1/mypublicId.webm'. 
This content should also be served over HTTPS.

How does one force https when using this component?

Would one use this component library to create the full page hero background effect popularly seen on many websites these days?

Using the following:

react@^16.5.0
react-dom@^16.5.0
cloudinary-react@^1.0.6

I'm experiencing a significant performance issue when causing a re-render of a list of product cards containing Image components.

The componentWillReceiveProps lifecycle event is taking around 170ms per Image component.

Looks to be related to a recursive loop where something is being cloned:

Sounds like it could be related to the issue raised here which was apparently resolved:
#31 (comment)

Thank you in advance.

Is it possible to sign somehow dynamic URLs using components from this lib? I mean use case with auto width taken dynamically from images' container on a client side. I made some debugging but didn't find anything. I guess that it's possible with SDK but probably only with static URLs which can be signed before moving an app to prod since appSecret can't be exposed to app clients.

It seems that there isn't a reason to render an additional div in the ClodinaryContext component, and that the component could instead simply render the children (similar to the react-redux Provider).

This would have the benefit of not needing to explicitly set the height to 100 for pages wrapped in the context and save us one level of nesting.

If interested, I'd be happy to open a PR for this.

If I have the following, the error occurs.

  render() {
    const { loading, ruutById } = this.props;
    if (loading) return null;
    return <div className="EmbedRuut">
      <Image cloudName="ruutly" publicId={ruutById.backgroundImage}>
        <Transformation fetchFormat="auto" width="700" crop="scale"/>
      </Image>
      {ruutById.title}
    </div>;
  }

If I take out <Transformation />, the error goes away and the image loads but I'd like to perform some transformations on it (fetchFormat, qualityFormat, width, etc)

Also, would love to see an image lazy load example - I think it has the capacity to load up multiple "sizes" and then render them when they download.

We are noticing some flash of broken images on page load.

The <img> is rendered even when this.state.url is empty, so you briefly get
<img src="" />,
which will flash a broken image in Chrome before rendering the correct one. (The broken image is showing up if you have a fixed width/height wrapper around your image).

Checking the length of this.state.url before returning the <img> in render() should fix this issue.

I can put in a PR for this soon.

I'm trying to generate a URL to a cloudinary image by passing the folder appended to the publicId in the "publicId" property of .

This process is described here for the generic solution: https://support.cloudinary.com/hc/en-us/articles/202520902-Can-I-create-folders-in-my-Cloudinary-account-

The component however puts this at the end after any manipulations so not immediately after /upload, this gives an incorrect URL.

When I use the Image component and I pass in normal HTML attributes, including native event handlers, they are getting converted to snake case inside the Image component and so they are ignored by React's img component (attributes and handlers aren't being applied properly to the resulting HTML element). You can see what I'm talking about in the attached screenshot of the React dev tools.

My suspicion is that the function call on this line https://github.com/cloudinary/cloudinary-react/blob/master/src/components/Image/Image.js#L107 is not handling the React-style of camel case attributes correctly. And there doesn't seem to be any notes on how to specially handle native HTML attributes in the docs for this component.

Hi, I currently get this message when trying to install:

npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/cloudinary-react

I have a page that loops through 12 items and renders and Image with Transformation, this blocks the rendering of other items and I get the "Unresponsive Script" warning from firefox, this causes my entire page to hang for 10-15seconds and almost rendered unresponsive.

I already set my context. I have a component like this

UserList.js

import { Image, Transformation } from 'cloudinary-react'

const UserList = (props) => {

	return(
		<div className="flex items-center py-2 border-grey-lighter border-b">
			<div className="" style={ { width: '50px' } }>
				<Image publicId={ props.user.meta.avatar } >
					<Transformation radius="max" width="35" height="35" crop="scale" />
				</Image>
			</div>
			<div className="">
				<p>{ props.user.name }</p>
				<small className="text-grey">{ props.user.email }</small>
			</div>
		</div>
		)
}

export default UserList

I use this component like this:

user_info.js

<div className="p-6">
{
 		user.connections.map( (user, index) =>  
 			<Link route="user_info" params={{ id: user.id }} key={index} >
 				<a className="block text-grey-darker">
 					<UserConnectionList user={user} />
 				</a>
 			</Link>
 			)
 	}
</div>

This is a huge performance issue I had to disable the Image with Transformation.

I have a component like this:

<Image
  cloudName="cloud"
  dpr="auto"
  responsive
  width="auto"
  crop="scale"
  publicId={photoId}
/>

Cloudinary JS SDK by default use breakpoint steps value = 100, which means I do not make requests for images sizes like 124px, 223px and so on. Using Image component it is no longer true. It always gets the exact width of the container.
I tried to set responsiveUseBreakpoints flag on CloudinaryContext element but with no effect.
What I discovered in Image.js component is that the options.responsive_use_breakpoints cannot be true, becasuse options object passed from cloudinary_update can contain only breakpoints and responsive props.

Hello, I am wondering how one can use the analytics, in specific the callbacks from the events. Specifically, the play, pause, and ended events. Is there any reccomended way to do this with your Video component. Thanks!

The now always returns an

But how about background-image's?

Hello,

First I would like to say good job for this library, seems being full of good react practices.

I would like to use this library with react-native. I think it's a simple conditional on using <Image> component instead of web <img> component. Nothing harder (I might be wrong), this can be prototyped using https://snack.expo.io.

(react-native is shipped with a fetch polyfill.)

Can we expect something like this in a near future ?

Best regards

When I try this:

<Image cloudName="mycloudname" publicId="mypublicid" width="300" crop="scale"/>

Sometimes it gives back this which works:

http://res.cloudinary.com/mycloudname/image/upload/c_scale,w_200/mypublicid

and sometimes it returns this which does not show an image:

http://res.cloudinary.com/mycloudname/image/upload/c_scale,w_large/mypublicid

^ Why does it sometimes return the broken url?

This is when I use publicId="publicid". If I use publicId="url", it works consistently.

so we could do:

import { imagePath } from 'cloudinary-react'

<img src={imagePath('myImgPublicIdHere')} />

My use case is to use this inside rendering markdown:

  <ReactMarkdown
    source={`
Some text here ...
![some alt text](${imagePath(myImgPublicIdHere)})
/>`

I am posting this issue here for others if they'd like to help. I am working to create typescript typings for cloudinary-react as I use .tsx when writing a React app. Catches bugs pretty quickly.

Repo i have forked: https://github.com/inunotaisho26/cloudinary-react.

I'm trying to configure cloudinary-react to output images accessible via a custom cname. The documentation specific to cloudinary-react is very sparse and seems to show the happy path (using cloudName).

With the props below, I've managed to get image URL's to output like this (almost correct).

http://media.mysite.co.uk/image/upload/myImage

<CloudinaryContext cname="media.mysite.com" cloudName="mysite" privateCdn>
  <CloudinaryImage publicId="myImage" />
</CloudinaryContext>

The cloudName prop seems redundant but my app dies if I omit it. This is almost there, the only thing I need to do is point my images at https. So I then tried the following:

<CloudinaryContext cname="media.mysite.com" cloudName="mysite" privateCdn secure>
  <CloudinaryImage publicId="myImage" />
</CloudinaryContext>

(I've added the secure prop to CloudinaryContext).

Expected output: https://media.mysite.co.uk/image/upload/myImage
Actual output: https://mysite-res.cloudinary.com/image/upload/myImage

For some reason, when adding the secure prop, the cname prop is ignored and the cloudName prop is used instead to incorrectly construct the {cloudName}-res.cloudinary.com domain string.

Am I doing something dumb? 😺

I have found another issue when testing these components some more. Each <Image> <Transformation> component is blocking the rendering of whole app.

Each image add about 120-300ms when testing. This means that having around 16 images on a single page adds between 3-5 seconds of page loading.

I can't find the exact cause but from a quick look it seems to be related to calculating the imagesize and URL.

And this happens every time the components are loaded.

For example if I have 16 images on start page

Start page (+5sec blocked loading) -> Click on subpage (loads fast no images) -> Click back to start page (16 images already downloaded but page freezes for 5 sec anyway).

This makes cloudinary-react unusable at the moment.

When replacing an image or video with a new uploaded version, how does one specify the version in this component? Simply replacing the asset won't immediately update as the asset is cached.

I can't seem to figure out how to do this with props.

http://cloudinary.com/blog/transparent_webp_format_cdn_delivery_based_on_visitors_browsers

Thanks,
Jeremy

I'm using bother Cloudinary React and React Bootstrap and have come across a conflict with the component

import { Image } from 'react-bootstrap';
import { Image } from 'cloudinary-react';

Is there a good way to solve this? I've considered:

• Changing the name of Image in cloudinary react manually.
• Importing the cloudinary Image component into a separate sub-component, then importing that component normally.

Thanks in advance!

Any plan to support options for private images and videos in the React SDK, or a guide for how to work with those?

Playing around with the library while walking through this post I have found that passing client_hints as shown in the article throws an error.

const Photo = () =>
  <Image
    cloudName="turd_ferguson"
    publicId="snl.jpg"
    client_hints="true" // throws error, I have tried just as client_hints as well since it's a Boolean related prop, but still the same result.
  >
    <Transformation gravity="auto" crop="fill" />
    <Transformation dpr="auto" />
    <Transformation width="auto" crop="scale" />
  </Image>

export default Photo

I see this at the bottom of the article, so my assumption is I no longer am required to pass this prop to use client_hints. Perhaps a better error message should be instated if that is the case?

It looks like the cloudinary_update method is called (which updates DPR) only when the responsive option is set. Is this intentional?

    if (options.responsive) {
      state.responsive = true;
      url = this.cloudinary_update(url, state);
    }

Is the only place it is called, and state.responsive must be true, but the implementation of cloudinary_update still checks for it.

  cloudinary_update(url, options = {}) {
    ...
    let resultUrl = this.updateDpr(url, options.roundDpr);
    if (options.responsive || this.state && this.state.responsive) {
    ...

I might be missing something, but DPR shouldn't be tied to a resize observer. In my use case, I need to calculate DPR, but I don't care about responsive breakpoints. Having to set responsive to true creates unnecessary event listeners.