Symfony 2: How to generate image paths in javascript file?

Question

I've been googling this for long time! I need to show images on some menu hover and mouseout. The code is written in a js file. But the images path needs to be generated. Is there any way to generate image paths using something like this

Can FOSJsRoutingBundle used to generate image paths in js files?

Nick · Accepted Answer · 2012-04-05 02:16:03Z

13

You could set global JS variables on your actual page:

<script>
    var menuDownUrl = "{{ asset('bundles/mybundle/images/menu_down.png') }}";
</script>

And then set inside your javascript file to call the global variable: window.menuDownUrl

Then creates a dependency inside your javascript file, but allows you to set that image dynamically.

edited Apr 5, 2012 at 2:16

answered Mar 15, 2012 at 16:51

Nick

2,9523 gold badges36 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

VishwaKumar Over a year ago

I think twig functions are not recognized in a javascript file. I get this error: Uncaught SyntaxError: Unexpected token {

VishwaKumar Over a year ago

Hey it actually worked. I had to put the code in my script block in my twig template. Thank You!!

isaiasmac · Accepted Answer · 2014-08-26 16:45:46Z

8

You can put an input hidden and set the path of the image.

<input type="hidden" id="img_path" value="{{ asset('images/circle_loading.gif') }}">

After that in jQuery you can use it like this

var img  = "<img src=\'"+ $("#img_path").val() +"\'>";
$("div").html(img);

answered Aug 26, 2014 at 16:45

isaiasmac

3163 silver badges17 bronze badges

Comments

ohFRY · Accepted Answer · 2012-04-04 01:21:30Z

6

Agree with Nick answer, but he forgot the "quotes" around the {{ asset(...) }}.

So it should be written like this:

 var menuDownUrl = "{{ asset('bundles/mybundle/images/menu_down.png') }}";

if you want window.menuDownUrl to work and not output you "undefined"

answered Apr 4, 2012 at 1:21

ohFRY

2381 gold badge2 silver badges10 bronze badges

Collectives™ on Stack Overflow

Symfony 2: How to generate image paths in javascript file?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related