How to Add an Image to Oracle APEX

Adding images to your Oracle APEX application can significantly enhance its visual appeal and functionality. Whether you need to enable users to upload their own images, display static application logos, or retrieve images from a database, APEX offers several robust methods.

Empowering Users with the Image Upload Item (APEX 23.2+)

For modern APEX applications (version 23.2 and later), Oracle introduced a specialized Image Upload item type. This powerful component comes with additional capabilities specifically designed for image uploads, making it ideal for scenarios like user profile pictures, product images, or document attachments where visual content is paramount.

You can customize the item's presentation using the Display As property, allowing you to change its look and feel to match your application's design. For instance, selecting the Icon DropZone option provides a visually engaging and user-friendly interface for image selection, offering a modern drag-and-drop experience.

Steps to Implement the Image Upload Item:

Navigate to your Page Designer: Open the page where you want to add the image upload functionality.
Create a New Page Item: In the Gallery pane, drag and drop the Image Upload item into a region.
Configure Item Properties:
- Type: Ensure it is set to Image Upload.
- Storage Type: Choose how the image will be stored:
  - BLOB column specified in Item Source: Stores the image in a Binary Large Object (BLOB) column of a table, often alongside other record data.
  - Table APEX_APPLICATION_TEMP_FILES: Stores the image temporarily, useful for multi-step processes before final submission.
- Display As: Experiment with options like Icon DropZone to see different UI presentations.
- Allowed File Extensions: Restrict uploads to specific image types (e.g., jpg, png, gif).
- Maximum File Size: Set limits to prevent excessively large files.
Integrate with Processes: Create an Automatic Row Processing (DML) process or a custom PL/SQL process to handle the storage of the uploaded image data into your desired table after page submission.

Displaying Images from BLOB Columns

Often, images are stored directly within your database in Binary Large Object (BLOB) columns. APEX provides an efficient way to display these images dynamically.

Steps to Display a BLOB Image:

Create a Page Item:
- In Page Designer, create a new item.
- Set its Type to Display Image.
Configure Source:
- Source Type: Choose SQL Query (return single value).
- BLOB Source:
  - Table Name: Specify the table containing the BLOB.
  - BLOB Column: Enter the name of the BLOB column (e.g., PHOTO).
  - Primary Key Column: Provide the primary key column (e.g., ID).
  - Primary Key Item: Link this to a page item that holds the ID of the record whose image you want to display (e.g., P1_EMPLOYEE_ID).
- MIME Type Column (Optional): If your table stores the image's MIME type (e.g., image/jpeg), specify that column here for better browser compatibility.
- Filename Column (Optional): Similarly, specify a filename column.

Example SQL for a Classic Report or Interactive Report:

To display BLOB images within a report, you typically use an <img> tag that references an APEX download URL.

SELECT
    id,
    employee_name,
    '<img src="' || APEX_UTIL.GET_BLOB_FILE_SRC('P1_PHOTO', id) || '" alt="' || employee_name || '" width="100">' AS employee_photo
FROM
    employees;

Note: P1_PHOTO would be a dummy item or a reference to your BLOB column if not using APEX_UTIL.GET_BLOB_FILE_SRC directly. For interactive reports, simply set the column type to Display Image and configure the BLOB source in the column attributes.

Including Static Images (Application Assets)

For images that are part of your application's design, like logos, banners, or static icons, you'll use Static Application Files or Static Workspace Files.

Steps to Use Static Images:

Upload the Image:
- Static Application Files: Go to Shared Components > Static Application Files. This is best for images specific to a single application.
- Static Workspace Files: Go to Workspace Utilities > Static Workspace Files. This is useful for images that might be shared across multiple applications within the same workspace.
- Click Create File and upload your image.
Reference the Image: Once uploaded, you can reference the image using a special syntax:
- In HTML Regions, Items, or Attributes:
```
<img src="#APP_IMAGES#your_image_name.png" alt="My Logo">
```
  Or for Workspace Files:
```
<img src="#WORKSPACE_IMAGES#your_image_name.png" alt="Shared Asset">
```
- In CSS (for background images):
```
background-image: url(#APP_IMAGES#background.jpg);
```
- Using Image Items: Create a Display Image item and set its Image Source to Static Application File or Static Workspace File, then select your file.

Referencing External Images (from URLs)

If your image is hosted on an external server or a content delivery network (CDN), you can simply reference its URL.

Steps to Reference External Images:

Create a Region or Item: Use an HTML region or a Display Only item with Escape Special Characters set to No.

Insert HTML:

<img src="https://example.com/path/to/your/image.jpg" alt="External Image">

Ensure the URL is publicly accessible.

Comparison of Image Handling Methods

Method	Purpose	APEX Version	Storage Location	Best For
Image Upload Item	User uploads, specialized capabilities	23.2+	BLOB column, Temp Files	User-generated content (profiles, products)
File Browse Item (Legacy)	General file uploads	All	BLOB column, Temp Files	General file uploads (documents, unspecialized images)
Display Image Item (BLOB)	Showing images from database BLOBs	All	Database BLOB column	Dynamic display of stored images
Static Application/Workspace Files	Application assets	All	APEX file system	Logos, icons, banners, static visuals
External URL Reference	Images hosted elsewhere	All	External server/CDN	Images already available online

Practical Tips for Image Management

Optimize Images: Before uploading, resize and compress images to reduce file size. This improves page load times and user experience.
Accessibility: Always include meaningful alt text for images. This is crucial for screen readers and SEO.
Security: When handling user uploads, validate file types and sizes. Store uploaded files securely, and never allow executable files.
Responsive Design: Use CSS to ensure images display correctly on various screen sizes (e.g., max-width: 100%; height: auto;).

By choosing the appropriate method, you can effectively integrate and manage images within your Oracle APEX applications, creating a richer and more engaging user experience.