Putting CDN base URL for `urlPath` changes `https://` to `https:/`

[danburzo]

I’m trying to prefix the src/srcset attributes of the markup generated by Image.generateHTML with the base URL for a CDN (.e.g. https://mycdn.com/). However, sending that value to parseUrl results in the https:/mycdn.com prefix (with a single slash). I assume this function is the culprit, as Node’s path.join() is not equipped to deal with URLs.

static convertFilePathToUrl(dir, filename) {
    let src = path.join(dir, filename);
    return src.split(path.sep).join("/");
  }

Should we make this function work for the case where dir is a valid URL?

---

Relevant .eleventy.js snippet:

let metadata = await Image(inputPath, {
	urlPath: `https://dans-cdn.com/img/`,
	// ...
});

const markup = Image.generateHTML(metadata, { ... });

[danburzo]

Note: For a quick solution, since ImagePath is exported, the function can be monkey-patched, e.g.

const prevImplementation = ImagePath.convertFilePathToUrl;
ImagePath.convertFilePathToUrl = function(dir, filename) {
	if (/https?:\/\//.test(dir)) {
		return new URL(filename, dir).toString();
	}
	return prevImplementation(...arguments);
}

[chmking]

Ran into the same issue. Workaround solved it for now. Thanks!

[zachleat]

Shipping with v6.0.0-beta.1.

For prior versions, use the urlFormat callback for this use case: https://www.11ty.dev/docs/plugins/image/#custom-urls