Изменение сгенерированного изображения веб-пакета src с помощью javascript после того, как веточка отрендерила шаблон

Question

Каков правильный подход, чтобы изменить источник изображения, сгенерированный в веб-пакете, с помощью javascript?

Я использую 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.

Даже если бы я знал, что веб-пакет с именем файла создан, я бы не стал использовать его в javascript по понятным причинам.

Как мне справиться с этой проблемой. потому что ветка должна генерировать URL при отображении шаблона. Сгенерированное имя файла выглядит как

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

Большое спасибо за вашу помощь.

p.s. Любые предложения для лучшего предмета для этого вопроса?

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'));
});