2015-05-03 1 views
0

Использование jssor ползунков с иконками, я заселить нг-Src атрибута пути изображений из базы данных:Эскизы изображений на Jssor ползунках имеют нулевой ЦСИ собственность

<div data-ng-repeat="img in resp.records"> 
     <img u="image" ng-src="{{ img.img }}"/> 
     <img u="thumb" ng-src="{{ img.thumb }}"/> 
</div> 

Код выше, далее интерпретировано Js файл сделан Jssor.com, который преобразует его в код ниже, который работает отлично подходит для той части изображения в соответствии с браузером:

<img u="image" ng-src="img/A01.jpg" src="img/A01.jpg"> 

, но не для той части миниатюр, который показан в браузере Лик е ниже:

<img u="thumb" ng-src="" src="null"> 

я не говоря уже о каком-либо Src тега выше (но только нг-SRC) из выражения между {{}}, который должен быть истолковано AngularJs.

UPDATE: Вот что img.img и img.thumb содержат:

{"records":[{"img":"img/A01.jpg","thumb": "img/thumbs/A01.jpg"},{"img":"img/A02.jpg","thumb": "img/thumbs/A02.jpg"}]} 

EDIT: По просьбе команды Jssor на уровне ниже конечного html вынесенным Угловая относительно части эскиза:

<div u="thumbnavigator" class="jssort02" style="left: 0px; bottom: 0px; width: 240px; height: 720px;" jssor-slider="true"> 
    <!-- Thumbnail Item Skin Begin --> 

    <!-- Thumbnail Item Skin End --> 
<div style="position: absolute; top: 0px; left: 0px; width: 240px; height: 720px; transform-origin: 0px 0px 0px; transform: scale(1);"><div class="jssort02" style="left: 0px; bottom: 0px; display: block; position: relative; top: 0px; overflow: visible;"><div u="slides" style="cursor: default; position: absolute; overflow: hidden; left: 47px; top: 319.5px; width: 146px; height: 81px; z-index: 0;"><div debug-id="slide_container" style="position: absolute; z-index: 0; pointer-events: none; left: 0px; top: 0px;"></div></div><div u="slides" style="cursor: default; position: absolute; overflow: hidden; left: 47px; top: 319.5px; width: 146px; height: 81px; z-index: 0;" debug-id="slide-board"><div style="width: 146px; height: 81px; top: 0px; left: 0px; position: absolute; opacity: 0; background-color: rgb(0, 0, 0);"></div> 

    <div debug-id="slide-0" style="width: 146px; height: 81px; top: 0px; left: 0px; position: absolute; overflow: hidden;"><div u="prototype" class="p pdn" style="left: 0px; top: 0px;"> 
      <div class="w"> 
       <img u="thumb" ng-src="" class="t" style="display: block;" src="null"> 
      </div> 
      <div class="c"></div> 
     </div><div style="width: 146px; height: 81px; top: 0px; left: 0px; z-index: 1000; display: none;"></div></div></div></div></div></div> 
+0

кажется, что img.thumb равна нулю. Правильно ли инициализирован объект img? – Michael

+0

img.thumb возвращает некоторые значения, но не хорошо интерпретируется Js. – Sivounette

+0

Но какова ценность 'img.thumb'? – Michael

ответ

0

Ваш код, похоже, хорошо работает, если URL-адреса rrect, возможно, есть еще одна проблема, не связанная с Angular.

angular.module('app', []).controller('Main', function($scope) { 
 
    $scope.resp = { 
 
    "records": [{ 
 
     "img": "http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Status-user-online-icon.png", 
 
     "thumb": "http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Status-user-online-icon.png" 
 
    }, { 
 
     "img": "http://icons.iconarchive.com/icons/aha-soft/3d-social/128/Online-writing-icon.png", 
 
     "thumb": "http://icons.iconarchive.com/icons/aha-soft/3d-social/32/Online-writing-icon.png" 
 
    }] 
 
    }; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="Main"> 
 
    <div data-ng-repeat="img in resp.records"> 
 
    <img u="image" ng-src="{{ img.img }}" /> 
 
    <img u="thumb" ng-src="{{ img.thumb }}" /> 
 
    </div> 
 
</div>

+0

Я думаю, проблема связана с Js-файлом, сделанным Jssor.com, который кажется очень сложным. Я жду, когда команды Jssor ответят. Благодаря @Michael – Sivounette

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

  • Нет связанных вопросов^_^