Symfony 4-如何在JavaScript中使用资产？

Question

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

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

每个图像都保存为Webpack尚未编译的资产。因此，每个图像都有一个基本名称和一个唯一的标识符，如下所示：

image1.5265262.png

image2.26598458.png

所以，在我的树枝文件中，我已经：

{{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

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

或

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

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