Question

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

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

但是，当set set 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

角度更好，使用ng-src代替src。

控制器中的

：

$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" />

Angular sqlLite设置css url（）无法设置相对路径

1 个答案: