Sending images from Wix database to an app through http request

Ask the community
, ,
1

I read several posts in this forum about how to configure the url from images stored in Wix but i am not really sure which answer the correct one is for my needs.

Are there specific functions i need to insert into the backend to make the images more accessible for the app? Is there something i have to adjust in the httpfuntions.js file?

I am exposing several databases in my http-functions.js file so is it possible to configure the url for all images exposed through this file?

That is how my http-functions.js file looks like.

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

export function get_regions () {

**let**  options  = { 
    "headers" : { 
        "Content-Type" :  "application/json" , 
        "Access-Control-Allow-Origin" :  "*" 
    } 
}; 

**return**  wixData . query ( "Regions" ) 
    . find () 
    . then (( results ) => { 

        **if** ( results . items . length  >  0 ){ 
            options . body  = { 
            "items" :  results . items 
        } 
                **return**  ok ( options ); 
        }                
    }) 
    // something went wrong 
    . **catch** (( error ) => { 
        options . body  = { 
            "error" :  error 
        }; 
        **return**  serverError ( options ); 
    });

}

...

}

EDIT: The question has been solved! Please check the comments below. Thanks to @J.D. for the help.

2

I think the question is not clear enough.
Please describe what exactly you wish to achieve. Is the code you posted work for you? Are you storing the images in the collection as full urls or internal Wix URIs? What should be the json structure you wish to send etc…

3

Hey J.D.,
thanks for the reply! Yes the http-function itself works perfectly fine; i can display Strings created from the JSON data for example. The images in my database are saved as internal WIX URIs.
My current workaround is that i copy the full urls from the image description of each picture in the database as well and use them for displaying images (here in the Main Image App column). And it works right now.

I was just wondering if it possible to replace the first part of the WIX URI ( wix:image://v1 )
with https://static.wixstatic.com/media/ at some point, maybe even in the http-functions.js file; so that the information, which is stored under my Main Image column can be used to display the images without an issue.

1460×502 104 KB

4

@acteevent Yes, before you send the items out do something like:


//...
items = items.map(e => {e.image = `https://static.wixstatic.com/media/${e.image.split('/')[3]}`; return e;});
//..
5

And if part of the image are stored in your collection as full URL and others as wix:image//, you should add a condition:

//...
 items = items.map(e=> {
if(e.image.startsWith('wix')) {
e.image =`https://static.wixstatic.com/media/${e.image.split('/')[3]}`;
}
return e;
});
//..
6

@jonatandor35 Where exactly can i put that line from your first answer to work properly? Does it have to be inside the functions like “get_regions()” or do i need a seperate function for that?
And i assume there variables i need to adjust? I am not really a coder; thats why i need to ask.

7

@acteevent

//...code.code..
return wixData.query("Regions").find()
.then((results)=>{
let items = results.items;
if(items.length > 0){
items = items.map(e => {e.image = `https://static.wixstatic.com/media/${e.image.split('/')[3]}`; return e;});
//.rest of the code
8

@jonatandor35 I implemented the code for my “Stories” collection and the log in WIX returns an Error 500. That is how i inserted the code:

export function get_stories () {

let  options  = { 
    "headers" : { 
        "Content-Type" :  "application/json" , 
        "Access-Control-Allow-Origin" :  "*" 
    } 
}; 

**return**  wixData . query ( "Stories" ) 
    . find () 
    . then (( results ) => { 
        let  items  =  results . items ; 
        if  ( items . length  >  0 ) { 
            items  =  items . map ( e  => {  e . image  =  `https://static.wixstatic.com/media/ ${ e . image . split ( '/' )[ 3 ]}`;  **return**  e ; }); 
                options . body  = { 
                    "items" :  results . items , 
                } 
            **return**  ok ( options ); 
        } 
    }) 
    // something went wrong 
    . catch (( error ) => { 
        options . body  = { 
            "error" :  error 
        }; 
        **return**  serverError ( options ); 
    });

}

9

@acteevent Maybe the field key in your collection is not image but something else (the replace it to the right key in the code).
Anyway open the site monitoring tool and look for error messages.

10

Also (regardless the error):
Instead of:

  options.body = {
       "items": results.items,
  }

Do:

  options.body = {
        "items": items
   }
11

@jonatandor35 Thank you, that was the error i was making!

For everyone else; this is the working code snippet to change the internal WIX uri to the URL fetchable for apps and other places in the net and make images accessable. It is in the http-functions.js file:

export function get_stories () {

let  options  = { 
    "headers" : { 
        "Content-Type" :  "application/json" , 
        "Access-Control-Allow-Origin" :  "*" 
    } 
}; 

**return**  wixData . query ( "Stories" ) 
    . find () 
    . then (( results ) => { 
        let  items  =  results . items ; 
        if  ( items . length  >  0 ) { 
            items  =  items . map ( e  => {  e . mainImage  =  `https://static.wixstatic.com/media/ ${ e . mainImage . split ( '/' )[ 3 ]}`;  **return**  e ; }); 
                options . body  = { 
                    "items" :  items , 
                } 
            **return**  ok ( options ); 
        } 
    }) 
    // something went wrong 
    . catch (( error ) => { 
        options . body  = { 
            "error" :  error 
        }; 
        **return**  serverError ( options ); 
    });

}

Note that mainImage is the field key in the database where my images are stored.

@J.D. i would like to know what the logic behind this line is. Can you help me?

https://static.wixstatic.com/media/ ${ e . mainImage . split ( '/' )[ 3 ]}