unpic
unpic copied to clipboard
Dynamic Cloudinary url gets truncated in Unpic srcset
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