How do I add an image for sharing across application

In Oracle APEX, using shared images across the application helps maintain consistency and reduces redundancy. Whether you're displaying logos, icons, headers, or any branding assets, storing the image once and referencing it throughout your pages is efficient and scalable. APEX allows you to upload images as static application files, which can then be used in regions, buttons, HTML expressions, and templates. In this blog, you’ll learn how to upload and reference a shared image in Oracle APEX and use it across your application pages.

How to Add an Image for Sharing Across the Application in Oracle APEX

1. Upload the Image as a Static Application File

   • Go to Shared Components → Static Application Files

   • Click Upload File

   • Choose your image file (e.g., company-logo.png)

   • After upload, the file is available under #APP_IMAGES#company-logo.png

2. Reference the Image in Page Regions or Items
   You can use the image URL in:

   • HTML Regions

     <img src="#APP_IMAGES#company-logo.png" alt="Company Logo">
     

   • Button Templates or Region Templates using the same #APP_IMAGES# substitution string.

3. Use in CSS for Backgrounds or Icons
   Reference the shared image in your CSS:

   .app-logo {
     background-image: url("#APP_IMAGES#company-logo.png");
     background-size: contain;
     background-repeat: no-repeat;
     height: 60px;
     width: 200px;
   }
   

4. Reference in PL/SQL or Dynamic Actions
   If you're dynamically generating content, you can include image paths using:

   htp.p('<img src="#APP_IMAGES#company-logo.png">');
   

5. Maintain or Update the Image
   When the image needs to change, simply re-upload the new version with the same filename. All references using #APP_IMAGES#company-logo.png will reflect the update automatically.

Best Practices for Shared Images in APEX

• Use descriptive file names (e.g., logo_main_header.png)

• Keep image sizes optimized for web (compressed and under 500KB)

• Organize assets with consistent naming for versioning if needed

• Use vector (SVG) images for icons when possible

• Avoid hardcoding image URLs—always use #APP_IMAGES# substitution string

• Centralize image references in templates or shared regions for maintainability

How to Add an Image for Sharing Across Applications in Oracle APEX

Adding an image for use across multiple applications in Oracle APEX ensures consistency and easy management of visual elements like logos, icons, and banners. Oracle APEX provides different ways to store and access images globally, making them available for all applications in a workspace.

 

1. Using Workspace Static Files for Global Image Access

Workspace static files allow images to be stored once and used across all applications within the same workspace.

Steps to Upload an Image to Workspace Static Files

1. Navigate to App Builder and click on Workspace Utilities.

2. Select Static Files under Workspace Utilities.

3. Click Upload File, then choose the image file from your computer.

4. After uploading, APEX will generate a file URL in the format:

#WORKSPACE_FILES#image_name.png

5. Copy this file reference to use in any application within the workspace.

Using the Image in an APEX Page

• For an HTML region

<img src="#WORKSPACE_FILES#image_name.png" alt="Shared Image">

• For a CSS Background Image

body {

    background-image: url('#WORKSPACE_FILES#image_name.png');

    background-size: cover;

}

• For a Page Item (Display Image Type)

1. Add a Display Image item to the page.

2. Set the Image URL to:

#WORKSPACE_FILES#image_name.png

This ensures the image is available in any application within the workspace without needing to upload it multiple times.

---

2. Using a Shared Database Table for Image Storage

For more control over images, store them in a shared database table that can be accessed across applications.

Creating a Table for Image Storage

Run the following SQL to create a table for storing images:

CREATE TABLE SHARED_IMAGES (

    IMAGE_ID NUMBER GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,

    IMAGE_NAME VARCHAR2(100),

    IMAGE_BLOB BLOB,

    MIME_TYPE VARCHAR2(50)

);

Uploading an Image Using an APEX Form

1. Create a new APEX File Browse item for image uploads.

2. In the process handling the upload, insert the image into the table:

INSERT INTO SHARED_IMAGES (IMAGE_NAME, IMAGE_BLOB, MIME_TYPE)

VALUES (:P1_IMAGE_NAME, :P1_IMAGE_FILE, :P1_MIME_TYPE);

Displaying the Image in Any Application

1. Create an Application Process or RESTful Web Service to serve the image.

2. In any APEX page, reference the image dynamically using:

<img src="f?p=APP_ID:0:SESSION::NO::P0_IMAGE_ID:1" alt="Shared Image">

This allows applications to fetch and display shared images stored in the database.

---

3. Using a CDN or External Storage for Images

If images need to be accessed across multiple workspaces or environments, use an external CDN (Content Delivery Network) or cloud storage service like:

• Oracle Cloud Object Storage

• Amazon S3

• Google Drive (public links)

Referencing External Images in APEX

• For an Image Tag in a Page Region

<img src="https://cdn.example.com/images/logo.png" alt="Company Logo">

• For a CSS Background Image

body {

    background-image: url('https://cdn.example.com/images/background.jpg');

    background-size: cover;

}

Using external storage ensures that images are accessible from multiple workspaces or even different APEX environments.

 

Oracle APEX provides several ways to store and access shared images across applications:

• Workspace Static Files for quick and easy access within a workspace.

• Database Storage for controlled access with dynamic retrieval.

• External Storage or CDN for global access beyond APEX.

The best approach depends on your application's needs and how frequently the images are updated. Workspace files are best for simple use cases, while database storage and CDN solutions provide more flexibility for enterprise applications.

Oracle APEX Documentation Links

• Managing Static Application Files

• Substitution Strings in Oracle APEX

• Customizing Application Appearance

Conclusion

Adding shared images in Oracle APEX using static application files is a clean and effective way to standardize design elements across your app. By uploading your images once and referencing them with #APP_IMAGES#, you make your application more maintainable, consistent, and easy to update. This approach supports better branding, performance, and UI management—essential for any well-structured APEX project.