在 jQuery attr 中使用 wp_localize_script 图像路径

Question

这是我的 PHP 代码，用于在 WordPress 子主题中使用 wp_localize_script 加载我的 jQuery 和我的图像。

$image = sprintf( '%s/image.png', get_stylesheet_directory_uri() );    
wp_localize_script( 'scroll-image', 'Image', $image ) ) ) );

这是我的 jQuery

 $( '.div img' ).attr( 'src', 'Image' );

但 HTML 输出返回 wp_localize_script 的第二个参数，但没有图像的完整路径。

<img src="Image">

我错过了什么？

当 $image 变量已经包含在 PHP 中时，为什么我需要在 jQuery 中包含图像的完整路径？

我确实检查了this answer，但我不明白为什么必须这样做，因为图像标签已经使用其他 PHP 代码输出。我要做的就是替换图像 src URL。

更新：如果我想使用图像作为这样的选项呢

wp_localize_script( 'scroll-image', 'Image', array( 'src' => str_replace( 'http:', '', get_option( 'my-image' ) ) ) );

Answer 1

wp_localize_script 接受三个参数。

• $handle：将附加数据的脚本句柄。
• $object_name: 将在你的 javascript 文件。
• $data：要传递给对象的数组数据

在您的 jQuery 代码中，您将 Image 作为字符串而不是变量访问。

你的JS代码需要改成这样：

 $( '.div img' ).attr( 'src', obj_name.image );

您的 PHP 代码应如下所示：

$image = sprintf('%s/image.png', get_stylesheet_directory_uri());
wp_localize_script('scroll-image', 'obj_name', array(
    "image" => $image
));