javascript - 在 twig 渲染模板后使用 javascript 更改 webpack 生成的图像 src

Question

使用 javascript 更改 webpack 生成的图像源的正确方法是什么？

我正在将 Webpack 与 Symfony 4 一起使用。 我习惯用 JavaScript 来改变字体、图标和其他东西的颜色，这完全没有问题。但现在涉及到使用 Assets 图像。

在我的 Twig 模板中，我有类似的内容:

<img class="" id="gig-gema-icon" src="{{ asset ('public/build/images/gema_grey.png') }}" alt="gema-icon">

现在我想更改图像源。显然做这样的事情是没有意义的

$('#gig-gema-icon').attr("src", "{{ asset ('public/build/images/gema_grey.png') }}");

在 JavaScript 中。

即使我知道 webpack 创建的文件名，出于显而易见的原因，我也不会在 javascript 中使用它。

我该如何处理这个问题。 因为 twig 在模板渲染时必须生成一个 url。 生成的文件名看起来像

<img id="gig-gema-icon" class="" src="/labelDB/build/images/gema_grey.7dd801c7.png" alt="gema-icon">

非常感谢您的帮助。

附:对于这个问题有更好的主题建议吗？

Answer 1

解决方案是依赖data属性，例如

<img data-source="{{ asset ('public/build/images/gema_grey.png') }}" />

您可以随时在 JavaScript 中访问此属性，

$('img[data-source]').each(function() {
    $(this).attr('src', $(this).data('source'));
});