How to use image ressource from sitepackage in javascript file in TYPO3 12?

Within a TYPO3 12 website I use the Sitepackagebuilder to create a sitepackage.

The Resources are structured as following:

Resources
  ...
  Public
    JavaScript
      scripts.js
    Icons
      arrow.png
    ...

Within my scripts.js I would like to access an icon from the Icons-folder (arrow.png) to use it with the slick slider as follows:

 $slider.slick({
   infinite: true,
   slidesToShow: 3,
   arrows: true,

   // Does not work due to script compression:
   prevArrow: "<button class="slick-prev slick-arrow" aria-label="Previous" type="button"><img src="../Icons/arrow.png"></button>",

   // I would like to access it like this (but it does not work):
   prevArrow: "<button class="slick-prev slick-arrow" aria-label="Previous" type="button"><img src="EXT:sitepackage/Resources/Public/Icons/slider-left.png"></button>",

   // Using the icon from fileadmin does work:
   prevArrow: "<button class="slick-prev slick-arrow" aria-label="Previous" type="button"><img src="fileadmin/Icons/slider-left.png"></button>",
 });

Does anybody know how to use an image ressources from the sitepackage within javascript in TYPO3?

You need to sign in to view this answers