angularjs ng-style: background-image жұмыс істемейді

Мен бұрыштық ng-style пайдалана отырып, дүниеге фондық суретті қолдануға тырысамын (сол мінез-құлқымен бұрын реттелетін директиваны қолданамын), бірақ ол жұмыс істемейді.


Дегенмен, егер өң түсіне тырысамын, онда жақсы жұмыс істейді. Мен қашықтағы көзді де, жергілікті көзді де қолданамын, http://lorempixel.com/g/400/200/sports/ де жұмыс жасамады.

74

7 жауаптар

Динамикалық мәндерді бірнеше тәсілмен бөлуге болады.

Қос бұйраланған жақшалармен интерполяция:

ng-style="{'background-image':'url({{myBackgroundUrl}})'}"

Жолды біріктіру:

ng-style="{'background-image': 'url(' + myBackgroundUrl + ')'}"

ES6 үлгілік литералы:

ng-style="{'background-image': `url(${myBackgroundUrl})`}"
171
қосылды
Бұл дұрыс жауап.
қосылды автор Nyxynyx, көзі
Бұл шын мәнінде ең жақсы жауап (немесе кем дегенде менің проблемам ...)
қосылды автор standup75, көзі
Назар аударыңыз, егер дұрыс емес синтаксисті пайдалансаңыз (мысалы, url() ішіндегі құтқарылған жалғыз тырнақшалар), браузер оның мәнін қабылдамауы және орнатпауы мүмкін.
қосылды автор user3638471, көзі
Сіздің опциямыз маған жұмыс істемеді. бірақ екінші нұсқа DID жұмыс істейді. Рахмет
қосылды автор Joe Nabeezy, көзі
Сондай-ақ, бұдырлы жақшалар арқылы өрнекті жаза аласыз: data-ng-style = «{'background-image': 'url (img/products/{{produ & zwnj; ct.img}}) код>
қосылды автор mykola.rykov, көзі

background-image үшін дұрыс синтаксисі:

background-image: url("path_to_image");

Ng-стилінің дұрыс синтаксисі:

ng-style="{'background-image':'url(https://www.google.com/images/srpr/logo4w.png)'}">
102
қосылды
laugh it ... Мен ұмыттым url :) рахмет @Stewie
қосылды автор Roland, көзі
btw, келесідей нәрсені қалай көрсетемін: {{products.products [currenRoute] .desc}} ; html-де?
қосылды автор Roland, көзі
Осындай нәрсе бар, бірақ менде currenRoute қатынасы бар. Бұл жол, сондықтан өнімдерімнің тізімі бар: snippi.com/s/rznpfvo ; және currentRoute - бұл өнімнің тізіміндегі идентификатордың біріне сәйкес келетін жол. Мен {{products.products.currenRoute.desc}} жасай алмайтындықтан, басқа жолды табуым керек ...
қосылды автор Roland, көзі
currentRoute - бағдардан өнімнің идентификаторы бола ма? Егер бұл жағдайда $ routeParams сервисі болса, оны контроллеріңізге енгізсеңіз, Сіздің жолыңыздың анықталғандығын ескере отырып, id ( $ scope.productId = $ routeParams.id ) сілтемесін сақтайды. '/ Өнімдер /: id'. Бірақ сіз бұл үшін жаңа сұрақ ашқыңыз келуі мүмкін.
қосылды автор Stewie, көзі
Мысалы, underscore.js арқылы сіздің контроллеріңізде: $ scope.product = _ ($ scope.products) .findWhere ({id: $ scope.currentRoute}) және сіздің пікіріңізде: {{product.title}} . Бірақ, чат ретінде түсініктемелерді пайдаланбайық. Жаңа сұрақ қойыңыз.
қосылды автор Stewie, көзі

Егер серверде деректерді қайтаруды күтсеңіз (item.id) және келесідей құрылысты салсаңыз:

ng-style="{'background-image':'url(https://www.myImageplusitsid/{{item.id}})'}"

Make sure you add something like ng-if="item.id"

Әйтпесе сізде екі сұрау немесе бір ақаулық бар.

15
қосылды
Жақсы нүкте :) +1
қосылды автор Roland, көзі

IE11-мен жұмыс істеу үшін күрескендер үшін

HTML

<div ng-style="getBackgroundStyle(imagepath)"></div>

JS

$scope.getBackgroundStyle = function(imagepath){
    return {
        'background-image':'url(' + imagepath + ')'
    }
}
10
қосылды
Хромда жұмыс істеген жалғыз нәрсе (ubuntu) барлық қалған мысалдардың немесе «ресми түрде» елемеуі мүмкін сияқты. Стиль өзгерді, бірақ ешқандай нәтиже жоқ.
қосылды автор davidkonrad, көзі
Сіз менің өмірімді қазір ғана алғысыммен құтқардыңыз. Мен NG-стилінің 11-ші сыныпта неге көрсетілмейтінін анықтауға тырыстым. Мен неге түсінбеймін, неге бұл жұмыс істеді?
қосылды автор w3bMak3r, көзі

Бұл мен үшін жұмыс істеді, бұйра жақшалар міндетті емес.

ng-style="{'background-image':'url(../../../app/img/notification/'+notification.icon+'.png)'}"

notice.icon мұнда айнымалы айнымалы.

1
қосылды

Егер бізде CSS мәніне немесе динамикалық мәнге ие болу қажет болса   background-image төлсипаты, ол біраз қиын болуы мүмкін   көрсетіңіз.

     

Айталық, контроллерде getImage() функциясы бар. Бұл   функция келесіге ұқсас пішімделген жолды қайтарады:   url (белгішелер/pen.png). Егер жасасақ, ngStyle мәлімдемесі көрсетілген   дәл сол сияқты:

ng-style="{ 'background-image': getImage() }"

Фон-сурет кілтінің атауына тырнақшалар қойыңыз.   Есіңізде болсын, ол объектінің кілті ретінде жарамды Javascript пішімделуі керек.

1
қосылды
Шақырудың көзі кім?
қосылды автор Manas, көзі

Жазбалар үшін контроллердегі өзіңіздің нысанды анықтай аласыз:

this.styleDiv = {color: '', backgroundColor:'', backgroundImage : '' };

одан кейін нысанның сипатын тікелей өзгерту үшін функцияны анықтай аласыз:

this.changeBackgroundImage = function (){
        this.styleDiv.backgroundImage = 'url('+this.backgroundImage+')';
    }

Осылайша мұны сіздің стиліңізді динамикалық өзгертуге болады.

0
қосылды