Thought I’d post this as I couldn’t find an answer on here. What I needed to do was to display an image located inside my WiX media manager inside an html element on the same site (it will probably work even if not on the same site).
Each of these images has an ID of the same length after a certain number of characters, and then has some noise after it, probably a filter of some sort. Here is the solution to get your image url and use it somewhere else:
Since initially writing this post we have come across a few problems, the main two being that images come in different formats (jpg, jpeg, png…) and it looks like WiX saves images in their original format, meaning my slice method above is rendered useless as jpg & jpeg differ in length. The second issue we’ve come across after some testing is that these image ID’s are not all the same length.
So how do we solve this…? I’ve used a regex to get the image ID and then I went fo a simple if else solution for the image type
function getImageLocation() {
let imageType = "";
let imageID;
let loc = locations[i];
const regex = /v1\/(.*?)\./gm;
const str = loc.image1 //my database field key is image1
let m;
while ((m = regex.exec(str)) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
imageID = m[1];
}
if (loc.image1.includes("png")) {
imageType = ".png"
} else if (loc.image1.includes("jpg")) {
imageType = ".jpg"
} else if (loc.image1.includes("jpeg")) {
imageType = ".jpeg"
} else if (loc.image1.includes("webp")) {
imageType = ".webp"
}
myImage = 'https://static.wixstatic.com/media/' + imageID + imageType + '/v1/fill/w_339,h_256,al_c,lg_1,q_80/Colorful%20Houses' + imageType
}
});
}