How to display image from directory which is on Unix Server on Interactive Report | Oracle APEX |

Question

I have my Apex 21.2 got it installed at my work place (office). It is on unix server

Below are the steps I performed

Step 1 : Created Directory and Grant :

grant execute on utl_file to SASER;
CREATE OR REPLACE DIRECTORY APEX_IMG AS '/demo/storefiles/';

OWNER | DIRECTORY_NAME  | DIRECTORY_PATH
SASER | APEX_IMG        | /demo/storefiles/ 

Step 2 : Created procedure in database :

CREATE OR REPLACE PROCEDURE blob_to_file (p_blob      IN OUT NOCOPY BLOB,
                                          p_dir       IN  VARCHAR2,
                                          p_filename  IN  VARCHAR2)
AS
  l_file      UTL_FILE.FILE_TYPE;
  l_buffer    RAW(32767);
  l_amount    BINARY_INTEGER := 32767;
  l_pos       INTEGER := 1;
  l_blob_len  INTEGER;
BEGIN
  l_blob_len := DBMS_LOB.getlength(p_blob);
  
  -- Open the destination file.
  l_file := UTL_FILE.fopen(p_dir, p_filename,'WB', 32767);

  -- Read chunks of the BLOB and write them to the file until complete.
  WHILE l_pos <= l_blob_len LOOP
    DBMS_LOB.read(p_blob, l_amount, l_pos, l_buffer);
    UTL_FILE.put_raw(l_file, l_buffer, TRUE);
    l_pos := l_pos + l_amount;
  END LOOP;
  
  -- Close the file.
  UTL_FILE.fclose(l_file);
  
EXCEPTION
  WHEN OTHERS THEN
   -- Close the file if something goes wrong.
    IF UTL_FILE.is_open(l_file) THEN
      UTL_FILE.fclose(l_file);
    END IF;
    RAISE;
/* WHEN UTL_FILE.invalid_operation THEN dbms_output.PUT_LINE('cannot open file invalid name');
WHEN UTL_FILE.read_error THEN dbms_output.PUT_LINE('cannot be read');
WHEN no_data_found THEN dbms_output.PUT_LINE('end of file');

UTL_FILE.fclose(l_file);
 RAISE;*/
END blob_to_file;
/

Step 3 : Created a table to store data :

CREATE TABLE PRODUCT_INFO
(
    PROD_ID NUMBER PRIMARY KEY,
    PROD_NAME VARCHAR2(50),
    UNIT VARCHAR2(20),
    RATE NUMBER,
    IMAGE BLOB

);

Step 4 : Apex application creation

I have logged in to apex and created an application with form and set propery apex_application_temp_files

Added a process on apex - Insert image in directory from APEX Application

DECLARE
 l_blob  BLOB;
BEGIN

 select  BLOB_CONTENT INTO   l_blob  FROM apex_application_temp_files
         where NAME= :P1_IMAGE;
  
  blob_to_file(p_blob     => l_blob,
               p_dir      => 'SASER',
               p_filename => :P1_PROD_ID  ||'.png');

  
END;

Step 5 : Created a classic report and added query

select prod_id,
prod_name,
unit,
rate,
'<img src="http://localhost:8080/i/DIRECTORY_NAME/'||prod_id||'.png" width=100px height=100px </img>' image
from PRODUCT_INFO

Above query - Step 5 works for Local ... how to modify the <image .... according to server

I want to modify below following line of code according to my server and make it work

Code : '<img src="http://localhost:8080/i/DIRECTORY_NAME/'||prod_id||'.png" width=100px height=100px </img>'

Here are my server details

Sample my URL Link : https://demo-apex-testing:1003/ords/f?p=110:2

APPLICATION ID : 110

PAGE ID : 2

I tried this but failed ...

'<img src="https://demo-apex-testing:1003/ords/i/SASER/'||prod_id||'.png" width=100px height=100px </img>'

I watched this video and it works for local and how about for server url which does not have localhost

Video : https://www.youtube.com/watch?v=mXFuDknwb38