Локальный путь изображения в AngularJS/JavasScript

Я хочу создать изменение фонового изображения при событии (в частности, изменение варианта выбора), и у меня возникли проблемы с получением пути изображения в моей локальной среде.Локальный путь изображения в AngularJS/JavasScript

Мой путь Изображение в каталоге: http://localhost/webpage1/img/ с изображением yellow.jpg

Я положил ng-style директиву в мое приложение (<div ng-controller="myCtrl" ng-style="style") и связать его с контроллером:

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

Однако я прерванный с извлечением пути к файлам для моих изображений. Я не хочу перечислять весь путь к файлу, так как он будет не таким, как только я ставлю его вживую, поэтому делать что-то вроде $scope.filepath = 'localhost/webpage1/img'; выглядит очень грязно и уродливо.

Edit: Мои выбрать параметры

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

источник

2016-03-23 Storm Parker

Посмотрите на этот ВОПРОС и ВСЕ его ответы: http://stackoverflow.com/questions/13781685/angularjs-ng-src-equivalent-for-background-imageurl – DotNetWala

Создание различных классов для фонов. Использования нг-класс на элемент, чтобы вызвать изменения стиля на основе выбора опции

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>

источник

2016-03-23 16:43:34 misher

опробовать этот метод, но у меня есть проблема с выбором опций выбора. Я поставил свой HTML-код для моего выбора в моем исходном вопросе. было бы что-то вроде '{'yellow': options.yellow ...' или '{'yellow': subject.yellow ...'? –

Подождите минуту. Я сделаю пример более подробно ... – misher

Я сделал это еще проще, проверьте его на plunker: https://plnkr.co/edit/MWgT4N8v2GscL3XmIcb9?p=preview – misher

Для решения вашего конкретного вопроса: Есть несколько способов сделать это, но вы могли бы придать $location и строить ваш url для изображения.

источник

2016-03-23 16:48:17 philoniare

Это тоже работает, я просто боюсь разных результатов, когда у меня это локальное или живое. –

Локальный путь изображения в AngularJS/JavasScript

ответ

Смежные вопросы