Getting URL of an Image that has been uploaded by a member (http request)

Ask the community
, ,
1

Hi guys,
I want to fetch all data of my database using WiX http request. This works fine.
In addition I want get the URL of each image, which is stored in the database to process it later.
For images which I uploaded myself by using the media manager it works again fine.
Example URL:

https://static.wixstatic.com/media/1d3270_a5700c18d5ee43568420b761f4c6d427~mv2_d_3000_2000_s_2.jpg/v1/fill/w_3000,h_2000/irina-grotkjaer-x-Ae7SJKgr0-unsplash_edited.jpg

The problem occurs, when I try to extract the URL of an image, which has been uploaded by a member of the site. Everything I can extract from the database is always something like this:

image://v1/33c34e_e281899cdd2943d3bacd7fa88a487418~mv2_d_2890_1780_s_2.jpg/2890_1780/33c34e_e281899cdd2943d3bacd7fa88a487418~mv2_d_2890_1780_s_2.jpg

I searched this forum for an issue like that and found one. I’ve implemented the code, but it the “let regexp = /.+?(?=.png)/;” returns null. I tried the code without this expression, but the produced link is wrong:

https://static.wixstatic.com/media/33c34e_e281899cdd2943d3bacd7fa88a487418~mv2_d_2890_1780_s_2.jpg2890_1780/33c34e_e281899cdd2943d3bacd7fa88a487418~mv2_d_2890_1780_s_2.jpg.png

export function getImageUrl(imageSRC)
{
 if (imageSRC.startsWith("wix:image://") || imageSRC.startsWith("image://")){    
        console.log(imageSRC);
 let regexp = /.+?(?=.png)/;
 var newimagesrc = regexp.exec(imageSRC)[0]; 
        newimagesrc = newimagesrc.replace('wix:image://v1/', '');
        newimagesrc = newimagesrc.replace('image://v1/', '');
        newimagesrc = newimagesrc.replace('/', ''); 
 let wixImageURL = "https://static.wixstatic.com/media/";    
 return wixImageURL + newimagesrc + ".png";
    } 
 return imageSRC;
}

Thanks for your help in advance!

2

Yes it will be.
https://www.wix.com/corvid/reference/$w.Image.html
https://www.wix.com/corvid/reference/$w.Image.html#src

Image
Images are images stored in the Media Manager or retrieved from an external web location.

The URL formats for images are:

  • Images from the Media Manager: wix:image://v1//#originWidth=&originHeight=[&watermark=<watermark_manifest_string>]

  • Images from the web: http(s)://

3

Thanks a lot for your response, but I don’t understand how to modify this link:

image://v1/33c34e_e281899cdd2943d3bacd7fa88a487418~mv2_d_2890_1780_s_2.jpg/2890_1780/33c34e_e281899cdd2943d3bacd7fa88a487418~mv2_d_2890_1780_s_2.jpg

in order to use the URL to display the image in a browser. Do you know how to achieve this?

4

@henschmidt9

let src = `image://v1/33c34e_e281899cdd2943d3bacd7fa88a487418~mv2_d_2890_1780_s_2.jpg`;
let fullLink = "https://static.wixstatic.com/media/" + src.split("/")[3];
5

@jonatandor35 Thanks man!!
This is exactly what I was looking for.

6

@henschmidt9 you’re welcome :slight_smile: