Вместо этого конкатенируйте переменную внутри jquery, возвращайте литеральное имя переменной

Question

Здравствуйте. Я только начал изучать разработку laravel и backend в целом, и в настоящее время работаю над проектом по созданию системы crud. Я пытаюсь обновить строку изображения из таблицы данных внутри функции ajax, объединив переменную, которая содержит имя изображения в качестве параметра для моего API и завернуть его в строку, например, так:

var newRow = $datatable.row.add([data.id, data.name, "<img id='pic' src='{{url('api/img',['foldername',"+data.img+"])}}' style='width:500; height:500'/>"]).draw().node()

Я ожидаю, что вывод в столбцах изображений будет примерно таким:

<img id='pic' src='http://localhost:8000/api/img/foldername/imagename.jpg' style='width:500; height:500'/>

но вместо этого я получил:

<img id='pic' src='http://localhost:8000/api/img/foldername/%2Bdata.img%2B' style='width:500; height:500 />

Мой маршрут API выглядит примерно так:

Route::get('image/{foldername}/{filename}','ImageController@getImage');

У кого-нибудь есть объяснение этой проблемы? что я тут не так сделал?

Answer 1

2 вещи (я предполагаю, что это в файле блейда):

1) У вас есть дополнительная закрывающая квадратная скобка ] в вспомогательном методе url().И папка, и имя файла должны быть внутри массива, вот так.Вы также должны быть осторожны при чередовании одинарных и двойных кавычек.

url('api/img', ['foldername', 'filename'])

2) Блейд PHP, который отображает URL-адрес, работает на сервере до запуска JavaScript в браузере.Поскольку JS дает data.img его значение, PHP не знает, что это должно быть, и поэтому интерпретирует его как строку "+ data.img +" с экранированными плюс символами для URL (%2b).

Вместо этого вы можете создать URL с заполнителями в PHP, а затем заменить заполнители на реальные значения в JS, когда вы знаете, что они собой представляют.

// This will allow blade to create the url with placeholders in PHP, and it will be interpreted 
// as a string literal in JS and assigned to the variable placeholderUrl
var placeholderUrl = "{{ url('api/img', ['foldername', 'filename']) }}";

// Then you can use JS to replace the value in the url
var realUrl = placeholderUrl.replace('filename', data.img);

// Then use the real URL to create the img tag. Notice the alternating single and double quotes
var imgTag = '<img id="pic" src="' + realUrl + '" style="width:500; height:500" />';

// And finally, use the img tag when you add the row
var newRow = $datatable.row.add([data.id, data.name, imgTag]).draw().node();