Symfony 4 - 如何在javascript中使用资产?

Question

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

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

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

图片1.5265262.png

图像2.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可以缓存为浏览器中的静态文件。