AngularJS - 在ng-template中不顯示圖像

在我的ng-template裏面，我有一個img標籤，我試圖應用一個背景圖片。請看下面的模板：AngularJS - 在ng-template中不顯示圖像

<script type="text/ng-template" id="myModalContent.html"> 
... 
    <a style="margin-left: 20px;" href =""> 
     <img id = "printIcon" style="width: 64px;height: 70px"> 
    </a> 
... 
</script>

我申請的巴紐圖標在我的.css文件：

#printIcon{ 
    background-image: url("../img/printingIcon.png"); 
    background-size: 64px 70px; 
}

當NG-模板在模式打開對話框中，會生成對圖像的請求（我在網絡選項卡中看到），並且已正確加載，但未應用於DOM。即使檢查img標籤，也會將background-image屬性作爲printingIcon.png文件並正確預覽。使用ng-template將圖像應用於DOM需要做什麼特別的事情，還是我做了不正確的事情？謝謝！

來源

2015-08-24 Joe Urc

http://stackoverflow.com/a/16513803/1130908 –

爲什麼您使用的圖像標籤沒有src？你有沒有嘗試過使用不同的元素？ – charlietfl

使用span標記代替SRC 並給出display：inline-block to #printIcon – Naresh217

一個更「角度的方式」來實現你想要的是使用指令來操縱DOM。

事情是這樣的：

var app = angular.module('app',[]); 
app.controller('ctrl', function($scope){ 
}); 

app.directive('backImg', function(){ 
    return function(scope, element, attrs){ 
     var url = attrs.backImg; 
     element.css({ 
      'background-image': 'url(' + url +')', 
      'background-size' : 'cover' 
     }); 
    }; 
});

退房的full Fiddle。

來源

2015-08-24 20:33:16

如果你不反對把你的標記文件引用，那麼這將工作：

<img ng-style="{'background-image':'url(/img/printingIcon.png)'}" width="64" height="70">

來源

2015-08-24 21:16:46 radius

AngularJS - 在ng-template中不顯示圖像

回答

相關問題