How to: Link to static assets in your Card

Sometimes you want to show a static asset like an image on your Card which is pulled from the folder the Card is stored in.

While normally linking to a relative path to the asset works, it may present you with broken links when using Now Assistant on a server farm, CDN or when embedding Cards on another page.

To mitigate that you can link images or other assets using a Liquid function:

Instead of linking to the image like this:

<img src="/components/my-card/logo.png" />

use the | component_url function:

<img src="{{ 'my-card/logo.png' | component_url }}" />

Using this function ensures asset paths stay linked up, even when a Card is embedded.

Last updated: Fri 16 Mar, 2018