Skip to content

Dynamic Cloudinary url gets truncated in Unpic srcset #130

@marcob896

Description

@marcob896

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions