Best Way Of Getting Base URL Inside KnockoutJS .html File

I managed to do this in app/design/frontend/<Vendor>/<Theme>/Magento_OfflinePayments/web/template/<Filename>.html, but the solution should work in the Magento_Checkout as well.

When you inspect the window variable in the dev-console of your browser, you will see that the checkout and checkoutConfig objects are available on checkout-pages.

Here are the relevant parts:

checkout.baseUrl
checkout.checkoutUrl
checkout.customerLoginUrl
checkout.removeItemUrl
checkout.shoppingCartUrl
checkout.updateItemQtyUrl

checkoutConfig.cartUrl
checkoutConfig.checkoutUrl
checkoutConfig.defaultSuccessPageUrl
checkoutConfig.forgotPasswordUrl
checkoutConfig.pageNotFoundUrl
checkoutConfig.registerUrl
checkoutConfig.staticBaseUrl

In my case, I wanted to display an image; here's the code:

<img data-bind="attr: {'src':checkoutConfig.staticBaseUrl + 'frontend/<Vendor>/<Theme>/<Locale>/images/logo.png'}" alt="" />

There are three parts to this, I will use the checkout authentication as an example but this should work in any KO/JS file that has mage/url as a dependency.

vendor/magento/module-checkout/view/frontend/web/js/view/authentication.js
vendor/magento/module-checkout/view/frontend/web/template/authentication.html

Setting up the URL in the JS file

Add mage/url to the list of dependencies.

Add the following function to the JS file:

getBaseUrl: function() {
    return url.build('testing');
},

Use Knockout to set the href

<a data-bind="attr: { href: getBaseUrl() }">Link here 2</a>

Result

I had to clear Varnish and browser cache.

<a href="http://localhost:3000/testing" data-bind="attr: { href: getBaseUrl() }">Link here 2</a>