Responsive image and server-side

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!

[roeeba]

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 https://plnkr.co/edit/A3RpWXpNXth9cbt9EUDm?p=preview

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.

[slackday]

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