php - Referencing Images in javascript to display on wordpress page

admin管理员组

文章数量:1297125

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');

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');

• php

Share Improve this question edited Mar 24, 2021 at 20:21 Tom J Nowell♦ 61k77 gold badges7979 silver badges148148 bronze badges asked Mar 24, 2021 at 19:35 AnkhiAnkhi 111 bronze badge 4

• Can you include the code? It's impossible to diagnose what's happening without seeing the code. What does the final HTML look like? And where is the brief code snippet you wrote located? – Tom J Nowell ♦ Commented Mar 24, 2021 at 20:01
• Please edit the code into your question using the edit link, you can't put multi-line code in comments. There is not enough context in your question to understand what is going on, e.g. it's unclear if your JS is in a JS file or a PHP file, a plugin or a theme, etc which is important to know – Tom J Nowell ♦ Commented Mar 24, 2021 at 20:12
• I fixed the formatting of your code addition, but I'm still unclear as to which file let imgArray = [ is in, is it in a javascript file? Or a PHP file? – Tom J Nowell ♦ Commented Mar 24, 2021 at 20:22
• sorry i keep including it but stavkoverflow keeps removing it as soon as i try to send the thing. the array is in a js file. it's part of the code that attempts to change the src value of the img tag. it works offline when wordpress nor php is involved, but it doesn't work this way. again i will mention it works on the text for each image, just not the img src. – Ankhi Commented Mar 25, 2021 at 3:55

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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/reference/functions/wp_localize_script/

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.

本文标签： phpReferencing Images in javascript to display on wordpress page