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

Angular sqlLite set css url() cannot set relative path

本文关键字：设置 相对 路径 sqlLite set css url Angular      更新时间：2023-09-26

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

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

然而，当设置src属性时，DOM显示它已被解析为一个文件：//绝对路径，该路径不呈现（不确定原因，但相对路径呈现良好）。

   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);">

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

在angular中，最好使用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" />
相关文章：