Использование атрибутов ветки, таких как ресурс, не работает в jQuery со значениями-заполнителями

Question

Я пытаюсь изменить изображение при успешной отправке ajax, изменив тег src img. Я получаю эту ошибку, хотя:

GET http://localhost:8000/%7B%7B%20asset('/uploads/images/$%7Bdata.picSource%7D')%7D%7D 404 (Not Found)

Я также получаю ошибки при создании новых кнопок с помощью jQuery, у которого в атрибутах href есть веточка path. Я читал статьи о том, как поместить веточку в такие кавычки: "", но я использую их: "и внутри них" ", чтобы свободно помещать переменные в path, чтобы сделать его динамичным. Это мой запрос Ajax:

$(".uploadPic").on('submit', function(event){
    event.preventDefault();
    event.stopPropagation();
    $.ajax({
        type: "post",
        url: "/upload",
        data: new FormData($(".uploadPic")[0]),
        processData: false,
        contentType: false,
        success: function (data) {
            let newSource = `"{{ asset('/uploads/images/${data.picSource}')}}"`;
            $("#userPic").attr('src', newSource);
        },
        error: function (response) {
            console.log(response);
        }
    });
});

Ответ на вкладке сети нормальный (имя и расширение рисунка): {"picSource": "8bcfb2d2a1117cbb452f632829a5cad8.jpeg"}, но я получаю ошибку при передаче нового атрибута. Часть из контроллера по успешному запросу ajax:

if(isset($request->request)) {

        $file = $request->files->get('user_pic_type')['userPic'];
        $file = $user->getUserPic();
        $fileName = $this->generateUniqueFileName() . '.' . $file->guessExtension();


        $file->move(
            $this->getParameter('users_directory'),
            $fileName
        );

        $user->setUserPic($fileName);


        $em = $this->getDoctrine()->getManager();
        $em->persist($user);
        $em->flush();


        return new JsonResponse(array('picSource' => $fileName));

    } 

Что я могу сделать, чтобы исправить эту проблему?

Answer 1

Вы перепутали JS (который работает в вашем браузере) и PHP (который работает на вашем сервере и передает отрендеренный HTML в браузер). Если вы хотите сгенерировать такое правило ресурса во внешнем интерфейсе, вы должны либо запустить для него AJAX-вызов, либо сгенерировать URL вручную.

Но так как вы уже используете AJAX-вызов, вы должны использовать его для возврата пути изображения для вас. Добавьте такой код в свой контроллер PHP:

 /** @var \Symfony\Component\Asset\Packages $manager */
$manager = $this->get('assets.packages');
$imagePath = $manager->getUrl('/uploads/images/' . $fileName);

return new JsonResponse(array('picSource' => $fileName, 'imagePath' => $imagePath));

Теперь серверная часть уже генерирует все необходимые данные для вас и отправляет их в браузер