如何在TYPO3 12中的javascript文件中使用sitepackage中的图像资源？

Question

在 TYPO3 12 网站中，我使用 Sitepackagebuilder 创建站点包。

资源的结构如下：

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

在我的scripts.js中，我想从图标文件夹（arrow.png）访问一个图标，以将其与slick滑块一起使用，如下所示：

 $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>",
 });

有人知道如何在 TYPO3 的 javascript 中使用 sitepackage 中的图像资源吗？

Answer 1

我想说没有优雅的解决方案。我将在哈希中包含

_asset

路径，例如像这样：

prevArrow: "<button class='slick-prev slick-arrow' aria-label='Previous' type='button'><img src='/_assets/23c138f87ce1b0461e894a8dcbbb57d6/Icons/arrow.png'></button>",

URL 中的哈希值是路径相对部分上的

md5

。只要你的 Composer 包的供应商名称没有改变，你就是安全的。对于部署来说，散列也没有问题。

请参阅此处如何创建哈希。