Angular Js Custom Directive未按预期工作

Question

我有一个自定义指令，如下所示。

(function () {
  'use strict';
  angular
    .module('directive.test', [])
    .directive('test', test);
  test.$inject = [];
/* @ngInject */
  function test() {
    // Usage:
    //
    // Creates:
    //
    var directive = {
      scope: {
      },
      restrict: 'EA',
      replace: true,
      link: link
    };
    return directive;
    function link(scope,elements,attrs){
      elements.attr('src','test.png');
      scope.$watch(function(){
          return attrs.test;
        },
        function(){
         if(attrs.test){
           elements.attr('src',attrs.test);
         }
        }
      );
    };
  }
})();

此指令用于检查用户是否为图像提供路径，否则使用默认路径。

js和图像在同一个目录中，但是当我打开html页面时，图像没有显示，我收到如下错误。

  

无法加载资源：服务器响应状态为404（未找到）