Referencing Images in javascript to display on wordpress page

Question

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'