用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。对这个问题有更好的建议吗?
答案 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'));
});