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

Question

我会尽力尽可能清楚地解释我的问题。我第一次尝试在我的 Laravel 项目中使用 angularJs。
Controller 只是从数据库中获取上传的照片

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

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

我正在使用 laracast 中的 PHP-Vars-To-Js 包(即您看到的 JavaScript 外观)将我的 PHP 照片对象传递给我的 javascript。但这不是问题，效果很好。现在，多亏了这个包，我可以通过

将照片对象直接放入我的 Angular Controller 中

$scope.photoList = photos;  

到目前为止一切顺利。现在我想实际显示图像并确保我确实设置了一个 div

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

div 里面有

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

问题是:照片路径类似于 photo/picture.png，其中 photo 是公共(public)目录中的文件夹，而我尝试显示图像(照片)的页面位于 路由组中 带有 /admin 前缀(末尾类似于 www.myapp.com/admin/photos)。当我尝试显示图像时，出现 404 错误，因为它正在 www.myapp.com/admin/photo/picture.png 而不是 www.myapp.com 中查找照片 src/photo/picture.png.
我的问题是:如何“强制”使用基本网址来搜索正确的照片路径？

Answer 1

您需要在 Controller 中添加一个方法来获取基本URL。

Angular Controller

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

模板

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