AngularJS - Image not Rendering in ng-template

Question

Inside of my ng-template, I have an img tag which I am trying to apply a background image. Find the template below:

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

I am applying the .png icon in my .css file:

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

When the ng-template is opened in a modal dialog, a request for the image is made (which I see in the network tab) and is loaded properly, but is not applied to the DOM. Even inspecting the img tag has the background-image property as the printingIcon.png file and previews it correctly. Is there anything special that needs to be done to apply images to DOM with ng-template, or am I doing something incorrectly? Thanks!

why are you using an image tag with no src? Have you tried using a different element? — charlietfl
– charlietfl, Commented Aug 24, 2015 at 20:24
use span tag instead of SRC <span id = "printIcon" style="width: 64px;height: 70px"></span> and give display:inline-block to #printIcon — Naresh217
– Naresh217, Commented Aug 24, 2015 at 21:13

U r s u s · Accepted Answer · 2015-08-24 20:33:16Z

1

A more "Angular way" to achieve what you want is using a directive to manipulate the DOM.

Something like this:

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'
        });
    };
});

Check out the full Fiddle.

answered Aug 24, 2015 at 20:33

U r s u s

7,04812 gold badges54 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

radius · Accepted Answer · 2015-08-24 21:16:46Z

0

If you aren't opposed to putting the file reference in your markup, then this will work:

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

answered Aug 24, 2015 at 21:16

radius

1591 silver badge6 bronze badges

Collectives™ on Stack Overflow

AngularJS - Image not Rendering in ng-template

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related