Laravel + AngularJs，使用ng-scr的基本路径而不是当前路径

Question

I'll try to explain my issue as clear as I can. I'm trying to use angularJs in my Laravel project for the very first time.
The controller just fetches the uploaded photos from the database

public function index()
    {
        JavaScript::put([
            'photos' => Photo::all()
        ]);

        return view('pages.protected.photos.index');
    }  

I'm using the PHP-Vars-To-Js package from laracast (that's the JavaScript facade you see) to pass my PHP photos object over to my javascript. But this isn't a problem, it works pretty well. Now, thanks to that package, I can get the photos object right into my angular controller simply by

$scope.photoList = photos;  

So far so good. Now I want to actually display the images and to get that I did set a div

<div class="row" ng-repeat="photo in photoList">

Inside the div there's

<img ng-src="@{{ photo.path }}">  

The problem is: photos path is something like photo/picture.png, where photo is a folder in the public directory and the page where I'm trying to display the images (photos) is in a route group with the /admin prefix (at the end something like www.myapp.com/admin/photos). When I try to display the image I get a 404 error cause it's looking for the photos src in www.myapp.com/admin/photo/picture.png instead of www.myapp.com/photo/picture.png.
My question is: how can I 'force' to use the base url in order to search for the right photo path?

Answer 1

You'll want to add a method in the controller to get the baseURL.

Angular Controller

$scope.getImageSourceFromPhotoPath = function (photoPath) {
    return window.location.protocol + '//' + window.location.host + '/' + photoPath;
}

Template

<div class="row" ng-repeat="photo in photoList">
    <img ng-src="getImageSourceFromPhotoPath(photo.path)">
</div>