Referencing Images in javascript to display on wordpress page

Question

So sorry if this have been answered - but in that case, I surely do not know what to ask.

Anyway, I have built an image slider which changes the image and the description of the image on click of a button. Point be, I dynamically change the source of the img tag using javascript. But the images do not actually appear on the page.

The code holding the images is a simple array and I just iterate over each one Ie: "images/work1.png", which works offline, but not via php and or wordpress.

This did not work, so I tried putting it in the php function instead: The javascript looks like:

let imgArray = [
        "<?php echo get_theme_file_uri('images/work1.png') ?>",
        "<?php echo get_theme_file_uri('images/work2.png') ?>",
        ... etc
];

So the html looks like : <img src="<?php echo get_theme_file_uri('images/work1') ?>">

The src tag's content is what changes but it does not take effect.

Any knowledge on why neither of those will actually work? The code works because the associated text for each image still changes via click of the button. Just, the image refuses to display.

functions.php looks like this:

function lcc_style_files() {
  wp_enqueue_style('lcc_main_styles', get_stylesheet_uri());
  
}

function lcc_script_files() {
  wp_enqueue_script('main-lcc-js', get_theme_file_uri('/js/scripts-bundled.js'), NULL, '1.0', true);
}

add_action('wp_enqueue_scripts', 'lcc_style_files');
add_action('wp_enqueue_scripts', 'lcc_script_files');

function lcc_features() {
  add_theme_support('title-tag');
}
add_action('after_setup_theme', 'lcc_features');

Answer 1

The problem is that you are trying to use PHP inside a javascript file. PHP only works inside .php files.

If you want to pass information to your javascript file from PHP, use wp_localize_script to store it in a variable, e.g. in a PHP file:

$values = array(
    'foo' => 'bar',
);
wp_localize_script( 'yourscripthandle', 'objectname', $values );
 

Now whenever the yourscripthandle script is enqueued, it will put those values at window.objectname.

You can accesss them like this in javascript:

const values = window.objectname;
console.log( values.foo ); // prints 'bar'

https://developer.wordpress.org/reference/functions/wp_localize_script/

Answer 2

PHP: function lcc_script_files() { wp_enqueue_script('main-lcc-js', get_theme_file_uri('/js/scripts-bundled.js'), NULL, '2.0', true); wp_localize_script('main-lcc-js', 'php_data', $imgList = array( "img1" => get_theme_file_uri('/images/work1.png'), "img2" => get_theme_file_uri('/images/work2.png') ));}

Js: let theImg = document.querySelector(".theImg"); theImg.src = imgArray.img2;

That will work, all I had to do (and all Tom J Nowell had to tell me) was to remove the quotes and the php tags around the values of the php array.