Почему не интерполируется запрос php в пути к картинке компонента Vue?

Question

[igor_solweb]

Добрый день, вроде банальная проблема, но не могу понять почему когда прописываю в компоненте vue в template

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

то не происходит интерполяция.

Знаю, что в js не пишут код php, но у меня же код vue.
подскажите куда смотреть и как правильно реализовать доступ к статичной картинке на сервере, чтобы не прописывать полностью весь путь.

Answer 1

[Сергей delphinpro]

Где-то в шапке страницы в шаблоне

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

и в компоненте

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

Comments

[igor_solweb]

Спасибо огромное, то что нужно!

Answer 2

[FanatPHP]

потому что в js не пишут код php.

Comments

[igor_solweb]

Подскажите какой вариант тогда используют? Правильно ли будет использовать что-то вроде переменной в которой будет указано document.location.protocol + '//' + document.location.host и далее путь к картинке ?

[FanatPHP]

у тебя vue хоть какие-то данные получает от РНР?
Если получает, то какая проблема передать с ними путь к картинке?

[igor_solweb]

нет данных никаких через php нет, vue не через cli подключается, просто отдельный js подключен к проекту с несколькими компонентами, и есть иконки, которые нужно подключить, хочу просто понять как это делают правильно, если <?php echo get_template_directory_uri() ?> здесь не подходит.

[FanatPHP]

при чем здесь вообще cli?!
такое ощущение что ты вообще не понимаешь, что такое php, cli, vue - и пишешь эти слова от балды в случайном порядке.

эти иконки статические? если да, то тупо пропиши к ним путь руками

какая проблема написать /template/img/icons/icon.svg ?