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

【问题标题】：Laravel + AngularJs, use base path with ng-scr instead of the current oneLaravel + AngularJs，使用带有 ng-scr 的基本路径而不是当前路径
【发布时间】：2015-11-20 20:31:35
【问题描述】：

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

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

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

我正在使用 laracast 中的 PHP-Vars-To-Js 包（即您看到的 JavaScript 外观）将我的 PHP 照片对象传递给我的 javascript。但这不是问题，它工作得很好。现在，多亏了那个包，我可以简单地通过

将照片对象直接放入我的角度控制器

$scope.photoList = photos;

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

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

在 div 里面有

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

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

【问题讨论】：

标签： javascript php angularjs laravel laravel-5.1

【解决方案1】：

您需要在控制器中添加一个方法来获取 baseURL。

角度控制器

$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>

【讨论】：

我尝试了您的解决方案，但它对我来说不太有效。我也返回了 404，因为现在它正在搜索 www.myapp.com/admin/getImageSourceFromPhotoPath(photo.path)
@MisterP 啊，这意味着您在管理员方向安装了 Angular 应用程序。在这种情况下，我会使用 window.location.origin 而不是 angular'a $location 服务。
谢谢，我会尽快尝试修复。我确实在管理部分安装了 Angular，因为我使用的是 AngularBooter 而不仅仅是标准的 Angular 应用程序。
我更新了我原来的答案。尝试使用 sn-p 以编程方式获取 baseURL。
谢谢，您的更新现在可以正常工作了。