如何在 AngularJs MVC 应用程序中为图像设置 @Url.Content

问：

我正在尝试上传图像并将其显示在我的应用程序中。我在 AngularJS、MVC 和 Web APi 方面工作。我的图像已成功上传到文件夹。

问题是：上传后，我将相对路径作为 Http 响应发回，并将其设置为我的控制器$scope属性，而我想与 img src 绑定。我不确定这是否是正确的方法。请指导这是错的还是我做错了什么。

我的观点是：

 <div class="profilePic">
       <img src="@Url.Content(UserDetails.PrflPic)" alt="Sample Image" />
 </div>
 <input type="file" valid-file upload="uploadFile(file)" ng-model="file">

这里“UserDetails.PrflPic”是我$scope属性，我想如何使用它。但是，我不能这样做，因为 Url.Content 只接受字符串。我试过这个@Url.Content（{{UserDetails.PrflPic}}），这也不好。

我的控制器方法是：

$scope.uploadFile = function (file) {
        
        var PromiseData = UserService.uploadProfilePicture(file);
        PromiseData.then(function (Response) {
            alertify.alert('Image uploaded sucessfully');
            $scope.UserDetails.PrflPic = Response.data;
            $scope.$apply();
           
        }, function (Error) {$scope.$apply();
            alertify.alert('Some issue occurred while saving picture');
        });
    }

文件上传 Api 为：

 public IHttpActionResult Post()
        {
            var httpRequest = HttpContext.Current.Request;

            // Check if files are available
            if (httpRequest.Files.Count > 0)
            {
                var postedFile = httpRequest.Files[0];

                var path = System.Web.Hosting.HostingEnvironment.MapPath("~/UserProfilePic/");
                if (!Directory.Exists(path))
                {
                    Directory.CreateDirectory(path);
                }

                // Fetch the File Name.
                string fileName = Path.GetFileName(postedFile.FileName);

                // Save the File.
                postedFile.SaveAs(path + fileName);

                var ImgLoc = "~/UserProfilePic/" + fileName;
                return Content(HttpStatusCode.OK, ImgLoc);
            }
            else
            {
                return BadRequest("No files to upload.");
            }
        }