Local image path in AngularJS/JavasScript

Question

I want to create a background image change upon an event (specifically a select option change) and I am having trouble getting the image path on my local environment.

My image path is in directory: http://localhost/webpage1/img/ with the image yellow.jpg

I've put an ng-style directive in my app (<div ng-controller="myCtrl" ng-style="style") and bind it with the controller:

app.controller('myCtrl', function($scope) {
    $scope.options = [
        { type: 'yellow'},
        { type: 'green'}
    ];
    //default image
    $scope.subject = $scope.options[0].type;
    $scope.image = $scope.subject + ".jpg";
    $scope.style = {background: "url(" + $scope.image + ") no-repeat center center fixed"};
    ....
});

However I am stumped with retrieving the file path for my images. I don't want to list out the entire file path since it won't be the same once I put it live, so doing something like $scope.filepath = 'localhost/webpage1/img'; looks very messy and ugly.

Edit: My select options

<select ng-model="subject" name="subject" class="subject" >
    <option ng-repeat="type in options">{{ type.type }}</option>
</select>

Have a look at this SO question and ALL its answers: http://stackoverflow.com/questions/13781685/angularjs-ng-src-equivalent-for-background-imageurl — DotNetWala, Mar 23 '16 at 17:43

kolodi · Accepted Answer · 2016-03-23T17:51:23.787

1

Create different classes for backgrounds. Use ng-class on element to trigger style changes based on select option

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.options = [
        { type: 'yellow'},
        { type: 'green'}
    ];
});

/* Put your css in here */
.foo {
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-position: center;
}

.yellow {
  background-image: url(http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg);
}

.green {
  background-image: url(http://im.rediff.com/news/2015/dec/24tpoty20.jpg);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="MainCtrl">
  <select ng-model="subject" name="subject" class="subject" >
    <option ng-repeat="type in options">{{ type.type }}</option>
  </select>
  <div class="foo" ng-class="subject"></div>
</div>
</body>

edited Mar 23 '16 at 17:51

answered Mar 23 '16 at 16:43

kolodi

1,002
9
16

trying out this method but I'm having trouble accessing the select options. I put in my HTML for my select in my original question. would it be something like `{'yellow': options.yellow...` or `{'yellow': subject.yellow...` ? – Storm Parker Mar 23 '16 at 17:29
i did it even simplier, check it on plunker: https://plnkr.co/edit/MWgT4N8v2GscL3XmIcb9?p=preview – kolodi Mar 23 '16 at 17:46
Ugh, for some reason it's not reading the class in my CSS. `.yellow { background: ....` is not showing up in the element inspection – Storm Parker Mar 23 '16 at 17:59
It's working when I used class instead of ng-class, strange – Storm Parker Mar 23 '16 at 18:12
try to reproduce your case in plunker and provide a link to it, so we can see all relevant code – kolodi Mar 23 '16 at 18:12

score 0 · Answer 2 · answered Mar 23 '16 at 16:48

0

To address your specific question: There are multiple ways to do it, but you could inject $location and build your url for the image.

answered Mar 23 '16 at 16:48

philoniare

1,625
1
13
20

This works as well, I'm just afraid of different results when having it local or live. – Storm Parker Mar 23 '16 at 18:33

Local image path in AngularJS/JavasScript

2 Answers2