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.

Got an issue? Or want to submit feedback?
Submit your feedback

Our new Feedback and Issue Tracker is built on GitHub Issues. Just leave your comment below and you can track our team resolve it, or browse issues others have already submitted.

Read how to use the Feedback and Issue Tracker