AngularJS - img ng-src 到 base64 数据（不是 url）不起作用

AngularJS

AngularJS是一种流行的前端框架，可以帮助开发者构建功能强大的Web应用程序。其中，img ng-src指令用于指定图片的来源。然而，有时候我们想要将图片的来源设置为base64数据而不是URL，但遇到了一些问题。

在AngularJS中，img ng-src指令可以接受一个表达式作为参数来设置图片的来源。通常情况下，我们可以将表达式设置为一个URL，例如：

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

这里的imageUrl是一个变量，其值为图片的URL。然而，如果我们想要将图片的来源设置为base64数据，就需要对表达式进行一些修改。

首先，我们需要将base64数据保存在一个变量中。我们可以使用JavaScript的btoa()函数将图片数据转换为base64编码。假设我们已经将base64编码的图片数据保存在变量base64Data中，那么我们可以使用下面的代码来显示图片：

<img ng-src="data:image/jpeg;base64,{{base64Data}}">

这里的data:image/jpeg;base64,是指定图片的MIME类型，它告诉浏览器这是一个JPEG格式的图片。接着，我们使用双花括号将base64Data变量包裹使其成为一个表达式。

然而，在某些情况下，这种方法可能无法正常工作。例如，当我们尝试在AngularJS应用程序中动态生成base64数据时，img ng-src指令可能无法正确地解析表达式。这可能是由于AngularJS的编译顺序问题导致的。

为了解决这个问题，我们可以使用$sce服务来告诉AngularJS我们信任这个base64数据。我们需要在控制器中注入$sce服务，并使用trustAsResourceUrl()方法将base64数据转换为可信任的URL。下面是一个示例代码：

app.controller('ImageController', function($scope, $sce) {
  var base64Data = '...'; // 假设我们已经有了base64数据
  var trustedUrl = $sce.trustAsResourceUrl('data:image/jpeg;base64,' + base64Data);
  $scope.imageUrl = trustedUrl;
});

在上面的代码中，我们首先获取了base64数据，并使用trustAsResourceUrl()方法将其转换为可信任的URL。然后，我们将可信任的URL赋值给imageUrl变量，并在img ng-src指令中使用它。

解决base64数据不起作用的问题

在上面的段落中，我们提到了使用$sce服务解决base64数据不起作用的问题。这是因为AngularJS默认情况下是不信任base64数据的，为了保证安全性，它会阻止加载这些数据。通过使用$sce服务，我们可以告诉AngularJS我们信任这些数据，并将其正确地显示在页面上。

示例代码

下面是一个完整的示例代码，展示了如何将base64数据设置为img ng-src的值：

html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="https://Ajax.Googleapis.com/Ajax/libs/AngularJS/1.7.9/angular.min.JS"></script>
  <script>
    var app = angular.module('myApp', []);
    app.controller('ImageController', function($scope, $sce) {
      var base64Data = '...'; // 假设我们已经有了base64数据
      var trustedUrl = $sce.trustAsResourceUrl('data:image/jpeg;base64,' + base64Data);
      $scope.imageUrl = trustedUrl;
    });
  </script>
</head>
<body>
  <div ng-controller="ImageController">
    <img ng-src="{{imageUrl}}">
  </div>
</body>
</html>

在上面的代码中，我们创建了一个名为myApp的AngularJS应用程序，并定义了一个名为ImageController的控制器。在控制器中，我们将base64数据转换为可信任的URL，并将其赋值给imageUrl变量。然后，我们在HTML中使用img ng-src指令来显示图片。

通过使用上述代码和技巧，我们可以成功地将base64数据设置为img ng-src的值，从而在AngularJS应用程序中正确地显示图片。