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: stackoverflow.com/questions/13781685/… — DotNetWala
– DotNetWala, Commented Mar 23, 2016 at 17:43

kolodi · Accepted Answer · 2016-03-23 17:51:23Z

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, 2016 at 17:51

answered Mar 23, 2016 at 16:43

kolodi

1,06211 silver badges17 bronze badges

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

5 Comments

Storm Parker Over a year ago

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... ?

kolodi Over a year ago

i did it even simplier, check it on plunker: plnkr.co/edit/MWgT4N8v2GscL3XmIcb9?p=preview

Storm Parker Over a year ago

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 Over a year ago

It's working when I used class instead of ng-class, strange

kolodi Over a year ago

try to reproduce your case in plunker and provide a link to it, so we can see all relevant code

philoniare · Accepted Answer · 2016-03-23 16:48:17Z

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, 2016 at 16:48

philoniare

1,6431 gold badge14 silver badges21 bronze badges

1 Comment

Storm Parker Over a year ago

This works as well, I'm just afraid of different results when having it local or live.

Collectives™ on Stack Overflow

Local image path in AngularJS/JavasScript

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related