How to get the subsite url from an image url in SharePoint Online using JavaScript?

Question

I have a list of urls pointing to images, which are originated in various subsites - sometimes burried in nested folder structures. Now, my question is: Is there any way I can derive the url of the containing subsite from such image url within the code of a display template?

I know it's not possible by pure string operations, since the folder structures have no clear pattern, but I hoped I somehow could get the context of the subsite and work from there. Something like this:

var ctx = SP.ClientContext(imageUrl);
var subsiteUrl = ctx.get_web().get_url();

Unfortunately, the context I receive from the imageUrl is invalid. Any ideas? Thx!

Answer 1

It's normal behavior to receive invalid context from image URL where you should provide absolute Site URL.

So You will need to split the URL first to get the Site URL as mentioned at How to split URL to get URL path in javascript

Alternatively, Instead of splitting image URL to get site URL you can use SP.ClientContext.get_current() as the following:

$(document).ready(function () { ExecuteOrDelayUntilScriptLoaded(loadSiteURL, "sp.js"); });
function loadSiteURL() {
var ctx = new SP.ClientContext.get_current();
this.site = ctx.get_site();
ctx.load(this.site);
this.web = ctx.get_web();
ctx.load(this.web);
ctx.executeQueryAsync(Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onFail));
}

function onSuccess(sender, args) {
   alert(this.site.get_url());
}
funtion onFail(sender, args) {
    console.log(args.get_message());
}