在树枝渲染模板后用javascript更改webpack生成的图像src

时间:2019-05-08 02:04:53

标签: javascript symfony webpack twig

用JavaScript更改由Webpack生成的图像源的正确方法是什么?

我正在将Webpack与Symfony 4一起使用。 我习惯用javascript来改变字体真棒图标和东西的颜色,这完全没有问题。但是现在涉及到使用资产图片。

在我的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中使用它。

如何处理此问题。 因为在渲染模板时,树枝必须生成一个URL。 生成的文件名看起来像

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

非常感谢您的帮助。

p.s。对这个问题有更好的建议吗?

1 个答案:

答案 0 :(得分:1)

一种解决方案是依靠data属性,例如

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

然后您可以随时在javascript中访问此属性,

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