title: Serving Static Workspace Files in Oracle APEX with Javascript
body: <p>I am incorporating <a href="https://developer.mozilla.org/en-US/docs/Web/API/Notification" rel="nofollow noreferrer">browser notifications</a> into Oracle APEX and I'm having trouble showing a custom icon in the notification. These icons can be adjusted to your liking by providing a URL to the location of the image. In Oracle APEX, you can upload static files and reference them using the #WORKSPACE_IMAGES#image.png, however, the #WORKSPACE_IMAGES# part does not get replaced when I use it in JavaScript. <strong>How do I get the URL of a static workspace file (png image) in JavaScript?</strong> I have tried using the following strings for the URL parameter of the notification:</p>
  <pre><code>showNotification(
      // &quot;https://developers.google.com/web/images/web-fundamentals-icon192x192.png&quot;, // Works
      // &quot;r/xxxxx/files/static/v71/image.png&quot;,                                        // Works, but is subject to change
      // &quot;#WORKSPACE_IMAGES#image.png&quot;,                                               // Does not work
      // &quot;&amp;WORKSPACE_IMAGES.image.png&quot;,                                               // Does not work
      // &quot;#IMAGE_PREFIX#image.png&quot;,                                                   // Does not work
      // &quot;&amp;IMAGE_PREFIX.image.png&quot;,                                                   // Does not work
      notification.title,
      notification.body,
      () =&gt; parent.focus()
  );
  
  const showNotification = (icon, title, body, onclick) =&gt; {
      // Let's check if the browser supports notifications
      if (!(&quot;Notification&quot; in window)) {
          alert(&quot;This browser does not support desktop notification&quot;);
      }
  
      // Let's check whether notification permissions have already been granted
      else if (Notification.permission === &quot;granted&quot;) {
          // If it's okay let's create a notification
          let notification = new Notification(title, {
              icon: icon,
              body: body,
          });
  
          notification.onclick = onclick;
      }
  
      // Otherwise, we need to ask the user for permission
      else if (Notification.permission !== &quot;denied&quot;) {
          Notification.requestPermission();
      }
  };
  </code></pre>
  <p><strong>These work:</strong></p>
  <ul>
  <li><a href="https://developers.google.com/web/images/web-fundamentals-icon192x192.png" rel="nofollow noreferrer">https://developers.google.com/web/images/web-fundamentals-icon192x192.png</a></li>
  <li>r/xxxxx/files/static/v71/image.png (the URL of the image once I rendered it normally using an APEX Image Display Item)</li>
  </ul>
  <p><strong>These don't:</strong></p>
  <ul>
  <li>#WORKSPACE_IMAGES#image.png</li>
  <li>&amp;WORKSPACE_IMAGES.image.png</li>
  <li>#IMAGE_PREFIX#image.png</li>
  <li>&amp;IMAGE_PREFIX.image.png</li>
  </ul>
  <p><strong>Extra information</strong></p>
  <ul>
  <li>We are using Oracle APEX 20.2 on an Autonomous Database</li>
  </ul>
  <p>Thanks in advance!</p>
  <p><strong>Edit:</strong>
  I ended up uploading the image to a domain handled by a hosting provider so I can access the image via that url.</p>