javascript - Symfony 4 - 如何在 javascript 中使用资源？

Question

在我的 Symfony 4 项目中，我有一个 View ，允许我从下拉列表中选择一个值。

我希望每次选择一个时，都会有与显示的值关联的图像。

每个图像都保存为已由 Webpack 编译的 Assets 。因此，每个图像都有一个基本名称和一个唯一标识符，如下所示:

image1.5265262.png

image2.26598458.png

所以，在我的 Twig 文件中，我:

{{form_row(form.theme, {'attr': {'onchange': 'changeImage(this)'}})}}
<img id="bootswatch"></img>

还有这个 JavaScript:

{% block javascripts %}

    <script>
        function changeImage(select)
        {
            var valeur = select.options[select.selectedIndex].value;
            var assetBaseDir = "{{ asset('build/images/') }}"
            $("#bootswatch").attr("src", assetBaseDir + valeur + '.png');
        }
    </script>

{% endblock %}

多亏了这一点，我几乎可以得到正确的东西。我得到了可以通往我的图像的路径，但它没有考虑由 webpack-encore 构建的图像的标识符。

例如，如果 value = "flatly"，我可以得到: /build/images/flatly.png 而当 webpack 编译它时，它最终会得到一个附加标识符及其新名称:flatly.029f753f.png

感谢您的帮助

Answer 1

我个人从图像名称本身中删除了版本控制，因为无论如何我都会重命名新版本，并且 Assets 路径可以轻松地由数据属性提供。如果您只使用几个图像，您可以为每个图像提供一个数据属性:

<img id="bootswatch" data-asset-url="{{ asset('build/images/flatly.png') }}">

或

<img id="bootswatch" data-asset-url="{{ asset('build/images/') }}">

当您想自己在后面附加图像的名称时。这样做的好处是，您不需要将 JS 代码直接写入 Twig block ，这是我不推荐的做法，因为它不可重用，并且 JS 可以在浏览器中缓存为静态文件。