Angularjs 如何使用Angular 1从$templateCache加载图像

我有一个很长的故事，但归根结底，我需要能够使用来自templateCache的图像。我试着用ng src这样做

$templateCache.put('img/help/copy_icon', '://www.drupal.org/files/issues/sample_7.png')
...
template: '<img ng-src="{{url}}">'

---

但这也不起作用

我不知道您使用$templateCache试图实现什么，在您的情况下，它只是将图像URL保存到缓存中，但我稍微修改了您的代码，因此它会显示图像，我添加了控制器：

app.run(function($templateCache){
  $templateCache.put('img/help/copy_icon', 'http://www.drupal.org/files/issues/sample_7.png')
})

app.directive('ngImg', function(){
  return {
    rectrict: "E",
    scope: {
      url: "@url"
    },
    template: '<img ng-src="{{ imgUrl }}">',
    controller: function ($scope, $templateCache) {
      $scope.imgUrl = $templateCache.get($scope.url);
    }
  }
})

app.run（函数（$templateCache）{
$templateCache.put（'img/help/copy_icon'，'http://www.drupal.org/files/issues/sample_7.png')
})
应用指令（'ngImg'，函数（）{
返回{
直读：“E”，
范围：{
url:“@url”
},
模板：“”，
控制器：函数（$scope，$templateCache）{
$scope.imgUrl=$templateCache.get（$scope.url）；
}
}
})

普朗克：

---

顺便说一句，不建议将ng前缀用于自定义指令名称，并且应保留用于角形核心指令/组件

“顺便说一句，不建议将ng前缀用于自定义指令名称，并且应保留用于角形核心指令/组件”--触摸感谢您是少数关心此问题的人之一。这只是举个例子。解释是广泛的，基于许多错误的决定。让我测试一下，然后再给你回复。

app.run(function($templateCache){
  $templateCache.put('img/help/copy_icon', 'http://www.drupal.org/files/issues/sample_7.png')
})

app.directive('ngImg', function(){
  return {
    rectrict: "E",
    scope: {
      url: "@url"
    },
    template: '<img ng-src="{{ imgUrl }}">',
    controller: function ($scope, $templateCache) {
      $scope.imgUrl = $templateCache.get($scope.url);
    }
  }
})