Getting image data from http requests

I am trying to expose data from my WIX database by creating an http request. I tried it on Postman and the data from the database is available for other platforms. However, it seems images can´t be used (or are at least not seen) when the request is made.

We are trying to use the database content for our mobile app. This is the response we are getting through Postman:

{
“_id” : “a10bd36a-2d38-46cf-810d-8cf8fad1fbb1” ,
“_owner” : “c43426ea-e213-41a5-a25a-41c0a97c5568” ,
“_createdDate” : “2021-06-16T13:57:36.569Z” ,
“_updatedDate” : “2021-07-17T10:04:27.576Z” ,
“regionReference” : “77c16c2f-0564-47f2-ad44-6f6c6a60cbd2” ,
“creator” : “Sarah Wils” ,
“blogReference” : “60df174a9e5cdd00155ec7b8” ,
“title” : “"Die Ruhe und die Atmospähre waren einmalig."” ,
“mainImage” : “wix:image://v1/c43426_fc57143a3a5f4f649d42c81a383f26c7~mv2.jpg/roberto-nickson-7BjmDICVloE-unsplash.jpg#originWidth=5472&originHeight=3648” ,
“link-stories-title” : “/stories/%22die-ruhe-und-die-atmosp%C3%A4hre-waren-einmalig.%22” ,
“link-stories-all” : “/stories/”
},

The request gives this image link on “mainImage” that cant be used by the app; the picture won´t show up. When i open the live website and open the same image in a new tab, this link appears in the URL bar:

https://static.wixstatic.com/media/c43426_fc57143a3a5f4f649d42c81a383f26c7~mv2.jpg/v1/fill/w_410,h_514,al_c,q_80,usm_0.66_1.00_0.01/roberto-nickson-7BjmDICVloE-unsplash.webp

Does it have to be the same in the code when the request is made or does it depend on the way the image is accessed through the code from our app?

i still have the same problem. anyone got a good answer yet?

i figured it out! here you go my friend. put this code in your backend, call it http-functions.js then replace the DatabaseExaple with your Database name. delete the ones not needed.

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 = [‘DatabaseExaple’, ‘DatabaseExample2’, ‘DatabaseExampleECT’];

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 it helps. next to figure out how to get the Posts, Groups, forums, messages and other stuff to show up if the request header has the Oath key.
:smile: