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?