---
schema_version: "1"
id: 7ecd067e75256e292c5a03550c79c7deb606c124b889814c9626c49040c0a41b
title: Referencing a Static Resource in Visualforce Markup
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/resources/pages-resources-reference.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-resources-reference.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 1f28a2626a23ff9eb1755b4a13010cdc0d5589410931279f4761fb3f0d652f3a
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# Referencing a Static Resource in Visualforce Markup

The way you reference a static resource in Visualforce markup depends on whether you want to reference a stand-alone file, or whether you want to reference a file that is contained in an archive (such as a .zip or .jar file):

-   To reference a standalone file, use `$Resource.<resource_name>` as a merge field, where _\<resource_name\>_ is the name you specified when you uploaded the resource. For example:

    ```visualforce
    <apex:image url="{!$Resource.TestImage}" width="50" height="50"/>
    ```

    or

    ```visualforce
    <apex:includeScript value="{!$Resource.MyJavascriptFile}"/>
    ```

-   To reference a file in an archive, use the `URLFOR` function. Specify the static resource name that you provided when you uploaded the archive with the first parameter, and the path to the desired file within the archive with the second. For example:

    ```visualforce
    <apex:image url="{!URLFOR($Resource.TestZip,
                        'images/Bluehills.jpg')}" width="50" height="50"/>
    ```

    or

    ```visualforce
    <apex:includeScript value="{!URLFOR($Resource.LibraryJS, '/base/subdir/file.js')}"/>
    ```

-   You can use relative paths in files in static resource archives to refer to other content within the archive. For example, in your CSS file, named styles.css, you have the following style:

    ```html
    table { background-image: url('img/testimage.gif') }
    ```

    When you use that CSS in a Visualforce page, you need to make sure the CSS file can find the image. To do that, create an archive (such as a zip file) that includes styles.css and img/testimage.gif. Make sure that the path structure is preserved in the archive. Then upload the archive file as a static resource named “style_resources”. Then, in your page, add the following component:

    ```visualforce
    <apex:stylesheet value="{!URLFOR($Resource.style_resources, 'styles.css')}"/>
    ```

    Since the static resource contains both the style sheet and the image, the relative path in the style sheet resolves and the image is displayed.

-   Through a custom controller, you can dynamically refer to the contents of a static resource using the `<apex:variable>` tag. First, create the custom controller:

    ```apex
    global class MyController {
        public String getImageName() { 
            return 'Picture.gif';//this is the name of the image 
        }
    } 
    ```

    Then, refer to the `getImageName` method in your `<apex:variable>` tag:

    ```visualforce
    <apex:page renderAs="pdf" controller="MyController"> 
        <apex:variable var="imageVar" value="{!imageName}"/> 
        <apex:image url="{!URLFOR($Resource.myZipFile, imageVar)}"/> 
    </apex:page>
    ```

    If the name of the image changes in the zip file, you can just change the returned value in `getImageName`.