# Use Images Uploaded as Static Resources

Static resources are a method for packaging one or more images, stylesheets, or JavaScript files for use within Lightning web components, and other Salesforce customization features.

Referencing an image stored in a Static Resource is straightforward, and fully documented. We present only a simple example here. See [Access Static Resources](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_resources) the *Lightning Web Component Developer Guide* for complete details.

The critical elements of an offline-ready implementation are:

- Access the URL of the resource by importing it using the `@salesforce/resourceUrl` module.
- Provide the image URL via a getter function.
- Use the getter function for the `src` attribute of an `img` tag in your HTML template.

:::important
While there are other methods for referencing images in an LWC, the preceding elements are required for **offline** image access to function. The Komaci static analyzer looks for this specific pattern when determining images to prime. Additionally, your getter function must be **statically** analyzable. If its result can only be determined at runtime, the image can’t be primed.
:::

## Example

```javascript
// imageFromStaticResource.js
import { LightningElement } from "lwc";
import TRAILHEAD_LOGO from "@salesforce/resourceUrl/trailhead_logo";

export default class ImageFromStaticResource extends LightningElement {
  get trailheadLogoUrl() {
    return TRAILHEAD_LOGO;
  }
}
```

:::note
LWC Offline doesn’t support archive static resources at this time. While you can upload each image as a separate static resource, we recommend that you use Content Assets, which do support archive files, for collections of related images. See [Use Images Uploaded as Asset Files](/docs/platform/mobile-offline/guide/use-images-from-contentasset.md).
:::

With the image URL provided by the getter function in the preceding component JavaScript, referencing the image in the HTML template is just like referencing any image in HTML. Use it in the `src` attribute of an HTML `img` tag.

```html
<!-- imageFromStaticResource.html -->
<template>
  <lightning-card>
    Display an image directly from a static resource: {trailheadLogoUrl}
  </lightning-card>

  <template if:true="{trailheadLogoUrl}">
    <img src="{trailheadLogoUrl}" />
  </template>
</template>
```

**See Also**

- [*Salesforce Help:* Static Resources](https://help.salesforce.com/s/articleView?id=platform.pages_static_resources.htm\&type=5)
- [*Lightning Web Components Developer Guide:* Access Static Resources](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_resources)
- [*Lightning Web Components Developer Guide:* `@salesforce/resourceUrl`in `@salesforce` Modules](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_salesforce_modules)