Как использовать Laravel URL::asset в jQuery или JS

#javascript #jquery #laravel

#javascript #jquery #laravel

Вопрос:

Я бы хотел использовать URL::asset для передачи URL в javascript вместо прямого url

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

Я бы хотел сделать что-то вроде этого:

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

но это, конечно, не работает, и вопрос в том, как это должно выглядеть, если это вообще возможно.

Ответ №1:

Почему это не работает?

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

Единственная причина, по которой это не сработает, заключается в том, что вы делаете это вне вашего блейд-файла и в отдельном файле JS. Если я что-то не пропустил?

Если у вас есть отдельный JS-файл, вы можете назначить некоторые «глобальные» переменные в блейд-файле, прежде чем ваш JS-файл будет объявлен в вашей разметке.

Например:

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

Затем в your-js-file.js , вы можете сделать это:

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

Комментарии:

1. Вы правы, js должен быть в блейд-файле, а не в отдельных js-скриптах. Спасибо!

Ответ №2:

Это не работает, потому что ваш файл javascript (something.js ) не анализируется PHP. Это означает, что PHP не проверяет файлы javascript на наличие php-кода.

Хотя вы можете передавать переменные между ними. Самый простой способ — сделать что-то подобное в вашем представлении (блочный файл):

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

В вашем javascript теперь у вас есть глобальная переменная, вызываемая url с искомым значением, и вы можете использовать ее в своем файле javascript:

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

Комментарии:

1. var url должен быть в кавычках var flagsUrl = '{{ URL::asset('/images/flags/') }}';

2. И точка с запятой в конце 🙂

Ответ №3:

Попробуйте так

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

Ответ №4:

Если вы вставляете изображение в папку public/images/abc.png, вы можете использовать

‘/images/’

вместо

{{ URL::asset(‘/images’) }}

в вашем файле js.

Пример в .blade :

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

в .js :

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