TYPO3 12中如何在JavaScript文件中调用站点包内的图片资源？

云原生阿岚

2026-6-17

在TYPO3 12中从JavaScript调用站点包内图片资源的方法

TYPO3的EXT:路径标识是后端解析专用的，前端JavaScript无法直接识别，因此需要通过以下几种方式传递正确的资源URL：

方法1：通过TypoScript注入全局JS变量

在站点包的setup.typoscript中添加配置，用Fluid视图助手生成资源的绝对URL，并注入到全局window对象中：

page.headerData.10 = TEXT
page.headerData.10.value (
    <script>
        window.sitePackageAssets = {
            arrowIcon: '{f:uri.resource(path:\'Icons/arrow.png\', extensionName:\'sitepackage\')}'
        };
    </script>
)

然后在scripts.js中直接引用全局变量：

$slider.slick({
    infinite: true,
    slidesToShow: 3,
    arrows: true,
    prevArrow: "<button class='slick-prev slick-arrow' aria-label='Previous' type='button'><img src='" + window.sitePackageAssets.arrowIcon + "'></button>"
});

方法2：通过Fluid模板传递资源URL（推荐）

如果滑块是在Fluid模板中渲染的，直接在模板里生成资源URL并通过data属性传递给JS：

<!-- Fluid模板中的滑块容器 -->
<div class="slider" data-arrow-icon="{f:uri.resource(path:'Icons/arrow.png', extensionName:'sitepackage')}"></div>

然后在scripts.js中读取data属性的值：

document.addEventListener('DOMContentLoaded', function() {
    const sliderEl = document.querySelector('.slider');
    const arrowIconUrl = sliderEl.dataset.arrowIcon;
    
    $(sliderEl).slick({
        infinite: true,
        slidesToShow: 3,
        arrows: true,
        prevArrow: `<button class='slick-prev slick-arrow' aria-label='Previous' type='button'><img src='${arrowIconUrl}'></button>`
    });
});

这种方式避免全局变量污染，更符合模块化开发规范。