How do I get the full URL (including domain name) to an image in a template?

I am outputting an image URL that is intended to be shared via social media... so the image URL is being passed to some javascript and sent to facebook, pinterest, etc. However, the <perch:content> tag for an image only outputs a path to the image, without the preceding domain name (https://example.com), which means the image links don't work from an external site.

I know that I can use <perch:setting id="siteURL" /> to get the full URL, but this includes the sub-path, so if I combine that with the image path I wind up with the wrong full URL to the image (I am developing in a subfolder on my local machine).

I've seen some other forum posts where you say not to develop in a sub-folder, but this is not an option for me at this stage of the project (nor would I want to -- the whole reason I am using Perch is because of the flexibility it provides compared to some other CMS's, so I find this limitation quite baffling since it could be solved with a simple config variable like in every other CMS out there).

So I guess what I'm looking for is a way to retrieve just the image file name or its path relative to the /perch/resources directory from a <perch:content type="image"> tag, without the preceding PERCH_RESPATH. Then I can append that to "<perch:settings id="siteURL" />perch/resources/" in my template to get the full URL to the image. Or if you have any other ideas on how to achieve this (other than "go back in time, change your company's development process and rebuild your site so it's not in a subfolder").

Thanks.