Problems retrieving and transforming images using the react SDK

Options
SMW
SMW Member Posts: 4 ✭
edited November 2022 in Developer APIs

I'm trying to use cloudiary images within a custom sanity component. Sanity uses React, so I've installed the React SDK.

So this demo code from the quick start works:

.......................................................................................................................

const cloudinary = new Cloudinary({

cloud: {

cloudName: 'demo'

}

});

const myImage = cloudinary.image('docs/models')

myImage.resize(fill().height(100).width(100))

..............................................................................................................................

I can see the image, and resize it.

But when I try to replace the cloudname and public id with my own ones:

.......................................................................................................................................

const cloudinary = new Cloudinary({

cloud: {

cloudName: 'rnz-stage'

}

});

const myImage = cloudinary.image('v1655416486/4LM73BR_bird4_jpeg.jpg')

myImage.resize(fill().height(100).width(100))

................................................................................................................................................

I need to include the file extension before I can see anything, and the resize step does not work.

I think this may have something to do with the image being the original image - but I am not sure how to get a not-original image. I am also not sure how the path (v1655416486/) has been generated. Can anyone shed some light on what is going on here?

Tagged:

Comments

  • Ranson
    Ranson Cloudinary Staff Posts: 19
    Options

    Hey SMW,

    So the difference between the `demo` cloud and your cloud `rnz-stage` is that it has `Strict Transformations` enabled on the `rnz-stage` cloud.

    ```

    With Strict Transformations enabled, the dynamic creation of new derived assets is blocked by default. New derived images can be created via the API, and can allowed using several other methods. Learn more

    ```


    So it is preventing any on-the-fly transformations from being processed on your cloud. You are able to disable this in your Cloudinary dashboard under settings -> security.


    The `v1655416486` is versioning that is automatically appended to your uploaded assets. See here for more information: https://support.cloudinary.com/hc/en-us/articles/202520912-What-are-image-versions-


    But it's basically a UNIX timestamp of when the asset was created and is useful when invalidating assets is required.


    Finally, the file extension is actually not required, but is useful for cases where `f_auto` is not being applied. If there are any errors with this please let me know and send the assets full URL ( e.g. http://res.cloudinary.com/demo/image/upload/sample.jpg is http://res.cloudinary.com/demo/image/upload/sample that both work )

Categories