How to set the path to the image generated from the javascript code (cms Wordpress)?

Question

CMS

Hello. Here is the code for generating carousel arrows (owl carousel2) from a javascript file

$('.feedback__carousel').owlCarousel({
      loop: true,
      nav: true,
      smartSpeed: 900,
      navText: ['<img src="img/arrow-left.png" alt="Стрелка влево">','<img src="img/arrow-left.png" alt="Стрелка вправо">'],
    });

But in this way nothing is displayed, only the img tag itself without an image. I tried to write like this:

// const arrSrc = "<? echo bloginfo('template_url'); ?>/";
const arrSrc = "&lt;? echo bloginfo('template_url'); ?&gt;/";
      console.log(arrSrc);

    $('.feedback__carousel').owlCarousel({
      loop: true,
      nav: true,
      smartSpeed: 900,
      navText: ['<img src="' + arrSrc + 'img/arrow-left.png" alt="Стрелка влево">','<img src="' + arrSrc + 'img/arrow-left.png" alt="Стрелка вправо">'],		
    });

But this does not work either, the code is displayed one to one in the inspector:

<img src="<? echo bloginfo('template_url'); ?>/img/arrow-left.png" alt="Стрелка вправо">

I do not need the slider arrow to be added from the admin panel, only from the layout. How to treat?? Help!

Answer 1

Hello.
The easiest way to write the path in full /wp-content/themes/ПАПКА_ТЕМЫ/img/arrow-left.png
If using WordPress tools is to pass the path using the wp_localize_script function .
More or less like this:

add_action( 'wp_enqueue_scripts', 'action_function_name_7714', 99 );
function action_function_name_7714(){
  wp_localize_script( 'jquery', 'mytheme', array( 
    'template_url' => get_template_directory_uri(), 
  ) );
}

and then get in js

$('.feedback__carousel').owlCarousel({
      loop: true,
      nav: true,
      smartSpeed: 900,
      navText: ['<img src="' + mytheme.template_url + '/img/arrow-left.png" alt="Стрелка влево">','<img src="' + mytheme.template_url + '/img/arrow-left.png" alt="Стрелка вправо">'],
    });