String/url for images

I am working with on a interactive case based on your sample for wix code: "Hide ans Show Elements» and the second sample technique with choosing pattern for the bag (my case is for a configurator of a bike ).

In the code here you are changing the actual pictures on a onClick action. Therefor I know to need how to get the directory and string for the images I upload to call up on them…

I asume //v1/ is for all images….I found the long string for the images, but I see you name the image aswell in the ending? is that required aswell after the long string you get when I copy the link of the image from the preview…?

I also assume that the /246_309/ after the long string is the dimensions of the pictures ??

Best regards

Lars

1 Like

You can get full image urls by sending an Wix Image path into this function.

export function getFullImageURL(imageSRC)
{
	if (imageSRC.startsWith("image:")){
		let wixImageURL = "";
 		wixImageURL = "https://static.wixstatic.com/media/";
 		let wixLocalURL = "";
 		wixLocalURL = imageSRC.replace('image://v1/', '');
 		wixLocalURL = wixLocalURL.substr(wixLocalURL.lastIndexOf('/')+1);
 		return wixImageURL + wixLocalURL;
 	} else
 	{
 		return imageSRC;
 	}
}

It works perfect for me in the aroundme.ai project.

2 Likes

Andreas, I needed it too, but your function no longer worked. This, modified one, does now again (replaced wix:image, substr(0, …= and return value;

export function getFullImageURL(imageSRC) {
 let strReturnImage = "";
 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;
}


3 Likes

Sorry I know, I updated my library but can’t update all code here :frowning:

1 Like

My problem is that I am unable to access any image in code, even thought the path is correct. I know the path is correct, because the image appears when the full path is entered into the browser bar:

However, the image link fails in code such as this:

I suspect this is because that path is dynamically generated at Wix’s end. Can anyone tell me why a header link like the one above fails to access the image? Thanks.

By the way, this fails too.
image://v1/cca1d7_a7afdba8ab2f4b7c89fde16946ece62d~mv2.png

The URL is perfectly correct (I can retrieve it), but just wondering: are you trying to do HTML inside the Wix Editor environment? Because that does not work.

Settings > Tracking & Analytics > Custom
This is where I have added the link tag I show in my message above. All other meta tags work perfectly in that area. It’s just the image tag that can’t seem to locate the image upon site load. It could be that Wix is incapable of finding an image referenced in the tag.

https://support.wix.com/en/article/setting-the-homescreen-icon-for-iphones-ipads-and-android-devices

Found this post when looking for a code to get the right image path from upload and depared with this code.
Just updated it and it follows working as 2020, january:

export function corrigeURL(imageSRC) {
let urlOriginal = imageSRC;
if (urlOriginal.startsWith(“image:”)) {
urlOriginal = urlOriginal.replace(‘image: //v1/’, ‘’);
urlOriginal = urlOriginal.substr(0, urlOriginal.lastIndexOf(‘/’));
console.log(urlOriginal)
urlOriginal = “https://static.wixstatic.com/media/” + urlOriginal;
let urlTemporary = urlOriginal.substr(urlOriginal.lastIndexOf(‘/’), );
urlOriginal = urlOriginal.substr(0, urlOriginal.lastIndexOf(‘/’));
urlOriginal = urlOriginal + “/v1/fill”;
urlTemporary = urlTemporary.replace(‘/’, ‘’)
urlOriginal = urlOriginal + “/w_” + urlTemporary.replace(‘', ',h’) + “/.png”
console.log(urlOriginal)
} else {
urlOriginal = imageSRC;
}
return urlOriginal;
}

@andreas-kviby Your comments helped me a lot around this forum, thanks btw.

1 Like