Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Responsive image and server-side

See original GitHub issue


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:


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!

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

roeebacommented, May 17, 2017

Hi @slackday, responsive is not part of a transformation. It should be set on the <Image> component and is ignored on the <Transformation>. width="auto" can either be set on CloudinaryContext for all images or on the transformation of a specific image. See example

In regards to your second question, currently setting a default src value is not supported. I’ve opened a task for our dev team to add such capability, though there’s no ETA at the moment.

slackdaycommented, May 24, 2017

Doh… should have looked st open issues first… thanks for telling me!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Serve responsive images -
When you serve responsive images, you're evaluating the display capabilities of the user's device and choosing one of a set of image ...
Read more >
Responsive images - Learn web development | MDN
In this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, ......
Read more >
How to Serve True Responsive Images (5 Methods) - Hongkiat
Keith Clark has his approach to serving responsive images with Cookies. It technically detects the screen size by using JavaScript and sizes the ......
Read more >
How To Create Responsive Images - W3Schools
Learn how to create an responsive image with CSS. Responsive images will automatically adjust to fit the size of the screen. Resize the...
Read more >
Responsive images - Cloudinary
The responsive method looks for all images in the page that have the "cld-responsive" class name, detects the available width for the image...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found