AngularJS/JavasScript'teki yerel resim yolu

Bir olayda arka plan görüntüsü değişikliği oluşturmak istiyorum (özellikle bir seçim seçeneği değişikliği) ve yerel ortamdaki görüntü yolunu almakta sorun yaşıyorum.AngularJS/JavasScript'teki yerel resim yolu

Benim resim yolu dizinde: görüntüyle http://localhost/webpage1/img/ benim app (<div ng-controller="myCtrl" ng-style="style") bir ng-style direktifini koymak ve denetleyici ile bağlamak ettik yellow.jpg

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

Ancak ben resimlerim için dosya yolunu almakla uğraştı. Tüm dosya yolunu listelemeyi istemiyorum, çünkü bunu yayınladığım zaman aynı olmayacak, yani $scope.filepath = 'localhost/webpage1/img'; gibi bir şey yapmak çok dağınık ve çirkin görünüyor.

Düzenleme: My seçenekleri seçin

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

kaynak

2016-03-23 Storm Parker

Bu SO sorusuna ve TÜM cevaplarına bir göz atın: http://stackoverflow.com/questions/13781685/angularjs-ng-src-equivalent-for-background-imageurl – DotNetWala

arka planlar için farklı sınıflar oluşturun. bunu yapmak için birden çok yolu vardır, ancak $location enjekte ve inşa edebileceğini: elemana kullanın ng sınıf

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>

kaynak

2016-03-23 16:43:34 misher

bu yöntemi deniyorum ama yaşıyorum seçim seçeneklerine erişimde sorun. Özgün sorumu seçtiğim için HTML'mi yerleştirdim. '{' sarı ': options.yellow ... 'veya' {' yellow ': subject.yellow ... 'gibi bir şey olurdu? –

Bir dakika bekleyin. Ben daha ayrıntılı bir örnek yapacağız ... – misher

Ben bile basitleştirdi, plunker üzerinde kontrol yaptım: https://plnkr.co/edit/MWgT4N8v2GscL3XmIcb9?p=preview – misher

özel soruya cevap için seçme seçeneği dayalı stil değişiklikleri tetikleyecek görüntü için URL'niz.

kaynak

2016-03-23 16:48:17 philoniare

Bu da işe yarıyor, sadece yerel veya canlı olduğunda farklı sonuçlardan korkuyorum. –

AngularJS/JavasScript'teki yerel resim yolu

cevap

İlgili konular