Serve static files, including images

Static assets reside in the ui/content/assets directory of a package, as described in the project structure document. This tutorial explains how to use these files in an application.

When referencing static assets in JSON configurations, use a relative URL starting with assets, followed by the directory path. For example, the relative URL for {package}/ui/content/assets/images/exampleImage.png is assets/images/exampleImage.png. The following configuration defines a UiSdlImage component to display exampleImage.png:

JSON

/* {package}/ui/c3/meta/examplePackage.Image.json */
{
  "type" : "UiSdlConnected<UiSdlImage>",
  "component" : {
    "horizontalAlign" : "CENTER",
    "altText" : "example image",
    "size" : "LARGE",
    "url" : "assets/images/exampleImage.png"
  }
}

To view the image as saved on the server, append the relative URL to the environment URL. For example, access https://{environment}/assets/images/exampleImage.png to retrieve the image directly.