Can't recognize a valid cloudinary url

[matiasfha]

Describe the bug Using @unpic/svelte (but also happens with other unpic libs) there are some cloudinary URL that are not recognized and flagged as invalid

To Reproduce Steps to reproduce the behavior:

1. Go to https://stackblitz.com/edit/vitejs-vite-qvjc1v?file=src/App.svelte
2. Check the console output
3. See error

Expected behavior The image should be rendered Find the image here

Screenshots

Desktop (please complete the following information):

• OS: macos
• Browser Arc
• Version Version 0.101.2 (38549)
  • Chromium Engine Version 112.0.5615.137

[matiasfha]

Looking into cloudinary-util code this Regex written by Colby Fayock works

const REGEX_URL = /https?:\/\/(?<host>[^\/]+)\/(?<cloudName>[^\/]+)\/(?<assetType>image|images|video|videos|raw|files)\/(?<deliveryType>upload|fetch|private|authenticated|sprite|facebook|twitter|youtube|vimeo)?\/?(?<signature>s\-\-[a-zA-Z0-9]+\-\-)?\/?(?<transformations>(?:[^_\/]+_[^,\/]+,?\/?)*\/)*(?<version>v\d+|\w{1,2})\/(?<publicId>[^\s]+)$/;

the caveat with Colby's approach is it requires a version number - otherwise its almost impossible to confidently parse the url

[nicolas-besnard]

I have the same issue with an URL.

In the regex, the id capture group does not include the forward slashes in the URL, causing it to fail to match the provided URL. In my case, I have to modify the regex as follow /https?:\/\/(?<host>[^\/]+)\/(?<cloudName>[^\/]+)\/(?<assetType>image|video|raw)\/(?<deliveryType>upload|fetch|private|authenticated|sprite|facebook|twitter|youtube|vimeo)\/?(?<signature>s\-\-[a-zA-Z0-9]+\-\-)?\/?(?<transformations>(?:[^_\/]+_[^,\/]+,?)*)?\/(?:(?<version>v\d+)\/)?(?<id>[^\.^\s]+)\.?(?<format>[a-zA-Z]+$)?/g