ascorbic / unpic

Universal image CDN translator
https://unpic.pics/lib
280 stars 31 forks source link

Dynamic Cloudinary url gets truncated in Unpic srcset #130

Open marcob896 opened 3 months ago

marcob896 commented 3 months ago

Hi, I'm effectively using Unpic React in my project but I'm encountering an issue in using a "dynamic url". An example of such url is the following:

<Image
src='https://res.cloudinary.com/dxfqd0qn4/image/upload/w_1200,h_630,c_fill,f_auto/l_00_excel-dashboard-slicers-filtri-interattivi_vbztau.png/c_scale,fl_relative,w_0.37/fl_layer_apply,g_east,x_50/w_570,h_450,c_fit,co_rgb:FFFFFF,g_west,x_45,y_-50,l_text:montserrat_50_bold:Excel%20Dashboard%3A%20Filtri%20dati%20interattivi%20(slicer)%20per%20tabelle%20e%20grafici%20pivot./og-image-blog-article-template'
width={1200}
height={630}
/>

inspecting with the browser I see that it gets truncated after the dot in pivot. and becomes:

https://res.cloudinary.com/dxfqd0qn4/image/upload/c_fill,w_640,h_384,f_auto/l_00_excel-dashboard-slicers-filtri-interattivi_vbztau.png/c_scale,fl_relative,w_0.37/fl_layer_apply,g_east,x_50/w_570,h_450,c_fit,co_rgb:FFFFFF,g_west,x_45,y_-50,l_text:montserrat_50_bold:Excel%20Dashboard%3A%20Filtri%20dati%20interattivi%20(slicer)%20per%20tabelle%20e%20grafici%20pivot

Strangely, If i use a ts function to generate the url, as I should:

<Image
src={generateOgImage({
title: post.title,
featuredImage: post.featuredImageUrl.slice(
post.featuredImageUrl.lastIndexOf('/') + 1
),
cloudName: 'dxfqd0qn4',
imagePublicID: 'og-image-blog-article-template',
})}
width={1200}
height={630}
/>

it gets truncated after the prevoius dot in w_0.37 and thus becomes:

https://res.cloudinary.com/dxfqd0qn4/image/upload/c_fill,w_640,h_384,f_auto/l_00_ciclo-for-each-macro-excel_kxhmym.png/c_scale,fl_relative,w_0

marcob896 commented 2 months ago

@ascorbic is there anything I can do here?