[SOLVED] Fetch Image with Full Url

Ask the community
, ,
1

Hello, I success to fetch every data to an mobile app, but to finish I need to get Image from my database. I get the wix format url like this => “wix:image://”
But I need to transform with full url. I tried this following (founded on this forum) on my “http-function” but I don’t know how call my function to get it. Can you help me please ?
(I readed all the day reference Velo’s doc but nothing founded…)
Thx

// In http-functions.js

import { ok , notFound , serverError } from ‘wix-http-functions’ ;
import wixData from ‘wix-data’ ;

const email = “contact@mizzup.com”

export function get_li () {
let options = {
“headers” : {
“Content-Type” : “application/json” ,
“Access-Control-Allow-Origin” : “*” ,
“Access-Control-Allow-Methods” : “POST, GET, OPTIONS” ,
}
};
// query a collection to find matching items
return wixData . query ( “RH” )
. eq ( “email” , email )
. find ()
. then ( ( results ) => {
// matching items were found
if ( results . items . length > 0 ) {
options . body = {
“photo” : results . items [ 0 ]. photo . r
};
return ok ( options );
}
// no matching items found
options . body = {
“error” : ' ${ email } ' was not found
};
return notFound ( options );
} )
// something went wrong
. catch ( ( error ) => {
options . body = {
“error” : error
};
return serverError ( options );

})
}

export function getFullImageURL ( imageSRC ) {
//convert the wix:image url to something that can be displayed inside html-component
let strReturnImage = “” ;
if ( imageSRC . startsWith ( “image:” )) {
let wixImageURL = “” ;
wixImageURL = “https://static.wixstatic.com/media/” ;
let wixLocalURL = “” ;
wixLocalURL = imageSRC . replace ( ‘image://v1/’ , ‘’ );
wixLocalURL = wixLocalURL . substr ( 0 , wixLocalURL . indexOf ( ‘/’ ));
strReturnImage = wixImageURL + wixLocalURL ;
}
else if ( imageSRC . startsWith ( “wix:image:” )) {
let wixImageURL = “” ;
wixImageURL = “https://static.wixstatic.com/media/” ;
let wixLocalURL = “” ;
wixLocalURL = imageSRC . replace ( ‘wix:image://v1/’ , ‘’ );
wixLocalURL = wixLocalURL . substr ( 0 , wixLocalURL . lastIndexOf ( ‘/’ ));
strReturnImage = wixImageURL + wixLocalURL ;
}
else {
strReturnImage = imageSRC ;
}
return strReturnImage ;
}

2

After you got the internal URI, do something like:

//let's say uri is the wix:image://.....
const fullURL = 'https://static.wixstatic.com/media/' + uri.split('/')[3];
3

Sorry i don’t understand where need i put this following code ?

on my https-function.js ? Or on my fetch return external website like this ? :

fetch ( “https://www.fitndiet7.com/_functions/li” )

// Converting received data to JSON 
. then ( response  =>  response . json ()) 
. then (( data )  =>  { 
    // Work with JSON data here 
    const  pic  =  data . photo 
    console . log ( pic ) 
  })
4

I guess:

//....
photo: 'https://static.wixstatic.com/media/' + results.items[0].photo.r.split('/')[3]
//....
5

No success…

I did it :
export function get_li () {
let options = {
“headers” : {
“Content-Type” : “application/json” ,
“Access-Control-Allow-Origin” : “*” ,
“Access-Control-Allow-Methods” : “POST, GET, OPTIONS” ,
}
};
// query a collection to find matching items
return wixData . query ( “RH” )
. eq ( “email” , email )
. find ()
. then ( ( results ) => {
// matching items were found
if ( results . items . length > 0 ) {
options . body = {
photo : ‘https://static.wixstatic.com/media/’ + results . items [ 0 ]. photo . r . split ( ‘/’ )[ 3 ],
};
return ok ( options );
}
// no matching items found
options . body = {
“error” : ' ${ email } ' was not found
};
return notFound ( options );
} )
// something went wrong
. catch ( ( error ) => {
options . body = {
“error” : error
};
return serverError ( options );

})
}

And now i get this following on my chrome console =>

6

802×130 14.8 KB

7

Make sure there’s

results . items [ 0 ]. photo . r .

8

2204×1356 269 KB

9

@jonatandor35 I’m sure of results, because i get the wix:image url and when i’m going on my dataset i get the same url like into the fetch. But url isn’t ready to use it with this format…

10

Are you sure you stored it in photo.r and not in photo?

11

Yes you right i don’t understand why i put “.r” but with
if ( results . items . length > 0 ) {
options . body = {
photo : ‘https://static.wixstatic.com/media/’ + results . items [ 0 ]. photo . split ( ‘/’ )[ 3 ]. join ( ‘’ )
};

i get the same “error 500” issue…

12

Remove the .join(‘’)

13

Its SOLVED yeah thanks you so much. I searched this since 3 days all long day ! thx thx thx :slight_smile:

14

I solved it like a different way. the following code does a few things, one it opens the api for the databases you whitelist, it hides all data that is hidden in the database, it displays the url link of images instead of the wix-media link. so no conversion is needed. then it adds the the link to the urls it displays.
id like to add groups and messages and such thinks like posts to that, with oath requests attached to the header of the request, but i haven’t figured that out yet. hope this help you.

import { ok, badRequest } from ‘wix-http-functions’;
import wixData from ‘wix-data’;

// Function to convert the Wix image URL to an external accessible URL
function convertWixImageUrl(wixImageUrl) {
if (wixImageUrl.startsWith(‘wix:image://v1/’)) {
let convertedUrl = wixImageUrl.replace(‘wix:image://v1/’, ‘https://static.wixstatic.com/media/’);
const match = convertedUrl.match(//([^/]+)$/);
if (match && match[1]) {
convertedUrl = convertedUrl.replace(match[0], ‘’);
}
return convertedUrl;
} else {
return wixImageUrl;
}
}

// Function to recursively convert Wix image URLs in an object
function convertWixImageUrlsInObject(obj) {
for (let prop in obj) {
if (typeof obj[prop] === ‘string’) {
obj[prop] = convertWixImageUrl(obj[prop]);
} else if (typeof obj[prop] === ‘object’) {
convertWixImageUrlsInObject(obj[prop]);
}
}
}

// Making a common open API for your data collections in Wix Code
// so other systems can consume your data
// Type in the Data Collection names you do allow to be a part
// of the common API functions (change each ‘database’ for your name of your database on query side ie: ’items’
let whiteList = [‘Database1’, ‘Database2’, ‘Database3’, ‘ECT…’];

export function get_api(request) {
const response = {
headers: {
‘Content-Type’: ‘application/json’
}
};

// Get name of Data Collection from path[0]
let datacollection = request.path[0];

// DummyData
if (whiteList.includes(datacollection)) {
return wixData.query(datacollection)
.limit(1000) // You can set a reasonable limit here for performance reasons
.ascending(‘title’) // Sort alphabetically by title in ascending order
.find()
.then((apiResults) => {
if (apiResults.totalCount > 0) {
// Convert Wix image URLs in the response before sending to the client
apiResults.items.forEach((item) => {
convertWixImageUrlsInObject(item);
});

      response.body = {
        items: apiResults.items
      };
      return ok(response);
    }

    response.body = {
      items: "No items found in the collection."
    };
    return ok(response);
  });

}

response.body = {
error: “Data Collection is not allowed to be used through this API.”
};
return badRequest(response);
}

Hope. this helps anyone following this.