I'd like to use URL::asset to pass url to javascript instead of direct url

$("select#lang").css("background-image", 'url(/' + $("select#lang").val() + '.png)');

I'd like do something like this:

$("select#lang").css("background-image", '{{ URL::asset('/images/flags/') }}' + $("select#lang").val() + '.png)');

but this of course doesn't work and question is how it should be look if is is possoble at all.

I'd like to use URL::asset to pass url to javascript instead of direct url

$("select#lang").css("background-image", 'url(http://pascha.org/img/' + $("select#lang").val() + '.png)');

I'd like do something like this:

$("select#lang").css("background-image", '{{ URL::asset('/images/flags/') }}' + $("select#lang").val() + '.png)');

but this of course doesn't work and question is how it should be look if is is possoble at all.

• javascript
• jquery
• laravel

4 Answers 4

Why doesn't this work?

$("select#lang").css("background-image",
  '{{ URL::asset('/images/flags/') }}' + $("select#lang").val() + '.png)');

The only reason it wouldn't work is if you're doing this outside of your blade file and in a separate JS file. Unless I've missed something?

If you do have a separate JS file, you could assign some "global" variables in the blade file before your JS file is declared in your markup.

For example:

<script>
    // "global" vars, built using blade
    var flagsUrl = '{{ URL::asset('/images/flags/') }}';
</script>
<script src="your-js-file.js"></script>

Then in your-js-file.js, you can do this:

$("select#lang").css("background-image",
  flagsUrl + $("select#lang").val() + '.png)');

It doesn't work because your javascript file (something.js) is not parsed by PHP. Meaning, PHP doesn't check javascript files for php code.

Although you can pass variables between them. The simplest way is to do something like this in your view (blade file):

<script type="text/javascript">
    var url = '{{ URL::asset('/images/flags/') }}'
</script>

In your javascript, you now have a global variable called url with the value you are looking for and you can use it in you javascript file:

$("select#lang").css("background-image", url + $("select#lang").val() + '.png)');

Try like this

 $("select#lang").css("background-image", 'url(/images/flags/'+ $("select#lang").val() + '.png)');

If you paste image to folder public/images/abc.png You can use

'/images/'

instead of

{{ URL::asset('/images') }}

in your js file.

Example in .blade :

<img src="{{ URL::asset('/images') }}/abc.png" />

in .js :

var image = "<img src='/images/abc.png' />";