javascript - Angular sqlite set css url() 无法设置相对路径

Question

我在 Ionic(混合)应用程序中使用 Angular sqlLite 来动态设置图像的 src。我需要将 css url 属性设置为等于这个普通的 img 声明:

   <img src="/images/img.png"/>

但是，当设置 src 属性时，DOM 显示这已被解析为 file://绝对路径，该路径不呈现(不确定为什么，但相对路径呈现正常)。

   var loadingImg="images/img.png";
   element.css({
        'src': "url("+loadingImg+")"
      });

DOM 将其呈现为:

<img  style="src: url(file:///var/containers/Bundle/Application/FD21EBE7-96DE-4DF2-A959-E8ED9C48CC20/Pulsar.app/www/images/bkg/2.png);">

如何设置它以使其呈现为我想要的相对路径？

Answer 1

在 Angular 中最好使用 ng-src 而不是 src。

在 Controller 中:

$scope.loadingImg="images/img.png";

在 html 中:

<img ng-src="loadingImg"/>

更新:

如果你想使用指令来设置图像，那么可以像这样:

指令:

app.directive('setImage', function() {
  return {
    link: function(scope, element, attrs) {
      var loadingImage = 'http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg';
      attrs.$set('src', loadingImage);
    }
  };
});

和HTML:

<img  set-image src="default/image.jpg" alt="img" />