Question

我目前正在尝试将图片加载到img标记中。我的问题是无法通过特定的src网址加载图片。所以我创建了一个返回图像的函数。我目前正在以下列格式调用该函数，没有加载图像。请注意我已经验证该函数确实将值作为数组缓冲区返回。谢谢你的帮助！

代码：

JS -

<img ng-src="{{getimage(id)}}">

HTML -

@Controller
public class PageController {

    @RequestMapping("/page")
    public ModelAndView index(ModelAndView modelAndView){
        String mess = null;
        mess.split(",");
        modelAndView.setViewName("index");
        return modelAndView;
    }

    @ExceptionHandler({Exception.class})
    @ResponseStatus(value = HttpStatus.BAD_REQUEST, reason = "Bad Request")
    public ModelAndView handleException(Exception ex, HttpServletRequest request,     HttpServletResponse response){
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.addObject("message", ex.getMessage());
        modelAndView.addObject("url", request.getRequestURL());
        modelAndView.addObject("code", response.getStatus());
        modelAndView.setViewName("exception");
        return modelAndView;
    }
}

Answer 1

函数Img.getImage(par).$promise是异步的。你不能在里面返回一个值。

这不是最好的解决方案，但你可以这样做：

JS：

$scope.getImage = function(productid) {
  console.log(productid);
  par = {id: [productid]};
  Img.getImage(par).$promise.then(
    function(data){
      console.log("success:" + data); //I am able to see this result but not display in img tag
      scope.productionPicturePath = data;
      return data;
    },
    function(data){
      console.log("error" + data);
    }
  );
}

HTML：<img ng-src="{{productionPicturePath}}">

Answer 2

您的getImage函数不会从服务返回数组缓冲区，因为您是从promise中获取的。如果要从异步操作中获取值并将其绑定到视图，则需要将其设置为$scope参数：

$scope.getImage = function(productid) {
      $scope.currentArrayBuffer = null;
      par = {id: [productid]};
      Img.getImage(par).$promise.then(
        function(data){
          console.log("success:" + data); 
          $scope.currentArrayBuffer = data;
        },
        function(data){
          console.log("error" + data);
        }
      );
    }

然后：

<img ng-src="{{currentArrayBuffer}}">

加载图像角JS

2 个答案: