Transformations image response url 404 error issue

PixelBin
#1

I have tried transformations method in PixelBin, I get response (https://cdn.pixelbin.io/v2/hidden-night-72b31d/t.resize(h:100,w:100)/https://cdn.pix[…]artment/pictures/square-logo/resize-w:1180/iTEIKwfNT-6047.png) , but i use that url in browser i get 404 error

{“message”:“File(https:/cdn.pixelbin.io/v2/jiomart-fynd/jio-np/wrkr/jmrtz0/department/pictures/square-logo/resize-w:1180/iTEIKwfNT-6047.png) does not exist.”,“status”:404,“errorCode”:“JR-0404”,“exception”:“TransformationJobError”,“info”:“[JR-0404]: https://fynd.engineering/erasebg/docs/error/0404”}

Example code:-

const pixelbin = new Pixelbin({
cloudName: “hidden-night-72b31d”,
// zone: “https://cdn.pixelbin.io/v2/hidden-night-72b31d/original/”
});

const image = pixelbin.image(“https://cdn.pixelbin.io/v2/jiomart-fynd/jio-np/wrkr/jmrtz0/department/pictures/square-logo/resize-w:1180/iTEIKwfNT-6047.png”);

let t = Pixelbin.transformations.Basic.resize({ height: 100, width: 100 });
image.setTransformation(t);

this.imageUrl = image.getUrl();
console.log(‘resp’, this.imageUrl);

#2

@Venkatesh

The URL that you’re using is a worker URL, identified by the /wrkr/ sub-path.

The PixelBin SDKs cannot transform such URLs. As a result, the output of ‘image.getUrl()’ is incorrect, resulting in the 404 error.

To apply/change the transformation of a worker URL, you’ll need to directly update the URL. E.g.: https://cdn.pixelbin.io/v2/jiomart-fynd/jio-np/wrkr/jmrtz0/department/pictures/square-logo/resize-w:100/iTEIKwfNT-6047.png . This too would only work if your translation logic can handle this new transformation.

Hope this helps.

#3

Okay, we have integrate theme level, but our jcp theme image response coming only this type https://cdn.pixelbin.io/v2/jiomart-fynd/jio-np/wrkr/jmrtz0/department/pictures/square-logo/resize-w:1180/iTEIKwfNT-6047.png

how to resolve?

#4

Hi @Venkatesh,
As discussed on the slack thread,
Since this is a worker url, you would not be able to apply transformations with the SDKs.
The correct usage would be

const workerUrl = "https://cdn.pixelbin.io/v2/jiomart-fynd/jio-np/wrkr/jmrtz0/department/pictures/square-logo/original/SEDfzrlXN-1524.png";

 const obj = Pixelbin.utils.urlToObj(pixelbinUrl);
// obj 
//{ 
// "cloudName": "jiomart-fynd",
// "zone": "jio-np", 
// "version": "v2", 
// "transformations": [], 
// "filePath": "", 
// "worker": true, 
// "workerPath": "jmrtz0/department/pictures/square-logo/original/SEDfzrlXN-1524.png", 
// "baseUrl": "https://cdn.pixelbin.io",
// "options": {}
// }

You can modify the workerPath manually with the required transformations and use Pixelbin.utils.objToUrl to create a valid url with transformations.

const obj = { 
    cloudName: "jiomart-fynd", 
    zone: "jio-np", 
    version: "v2", 
    transformations: [], 
    filePath: "", 
    worker: true, 
    workerPath: "jmrtz0/department/pictures/square-logo/original/SEDfzrlXN-1524.png", 
    baseUrl: "https://cdn.pixelbin.io/"
}; 
const url = Pixelbin.utils.objToUrl(obj); 
// obj is as shown above
 // url 
// https://cdn.pixelbin.io/v2/jiomart-fynd/jio-np/wrkr/jmrtz0/department/pictures/square-logo/original/SEDfzrlXN-1524.png
#5

I tried, but not working, how to integrate theme level? need you help @Noel_Mathew