Pfad zum Bild in js mit wp_localize_script

Ich versuche animierte SVG-Icons in mein WordPress-Theme zu implementieren. Alles ist großartig, außer dass ich nicht herausfinden kann, wie man die richtige URL für Svg-Bilder in diese js-Datei legt:

var svgIconConfig = { plus : { url : 'svg/plus.svg', animation : [ { el : 'path:nth-child(1)', animProperties : { from : { val : '{"transform" : "r0 32 32", "opacity" : 1}' }, to : { val : '{"transform" : "r180 32 32", "opacity" : 0}' } } }, { el : 'path:nth-child(2)', animProperties : { from : { val : '{"transform" : "r0 32 32"}' }, to : { val : '{"transform" : "r180 32 32"}' } } } ] } }; 

Hier ist, was ich versucht habe:

in functionen.php

 function svgicons_config() { wp_register_script('svgicons-config', get_template_directory_uri() . '/js/svgicons-config.js', array(), '1.0.0', 'true'); // Custom scripts wp_enqueue_script('svgicons-config'); } $svg_path = array( 'template_url' => get_bloginfo('template_url') ); wp_localize_script( 'svgicons-config', 'svg_path', $svg_path ); add_action('init', 'svgicons_config'); 

Und in svgicons-config.js:

 url : 'svg_path.template_url+"/svg/plus.svg"', 

und noch einige Variationen davon. Aber kein Glück. Ich bin mir fast sicher, dass ich in diesem Teil einen dummen Fehler mache.

Solutions Collecting From Web of "Pfad zum Bild in js mit wp_localize_script"

Abgesehen von der Tatsache, dass Sie nicht get_bloginfo('template_url') , sondern get_template_directory_uri() oder *_stylesheet_*() , ist dies ein JavaScript-Problem: Das lokalisierte Objekt sollte nicht in Anführungszeichen gesetzt werden:

 // Wrong url : 'svg_path.template_url+"/svg/plus.svg"', // Right: url : svg_path.template_url + "/svg/plus.svg", 

Wenn Sie mit JavaScript arbeiten, verwenden Sie einfach console.log( svg_path ) in Ihrem Skript, um die Ausgabe in der Developer Tools-Konsole Ihres Browsers console.log( svg_path ) .