Why is the php request not being interpolated in the image path of the Vue component?

Question

PHP

Good afternoon, it seems like a banal problem, but I can’t understand why when I register in the vue component in the template

<img src="<?php echo get_template_directory_uri() ?>/img/icons/icon.svg" alt="icon">

then no interpolation takes place.

I know that php code is not written in js, but I have vue code.
tell me where to look and how to correctly implement access to a static image on the server, so as not to prescribe the entire path.

Answer 1

Somewhere in the header of the page in the template

<script>
  window.tplDir = '<?php echo get_template_directory_uri() ?>';
</script>

and in the component

<img
  :src="window.tplDir + '/img/icons/icon.svg'"
  alt="icon"
>

Answer 2

because php code is not written in js.