Jssor滑塊上的縮略圖圖像具有null src屬性

Question

使用帶有縮略圖的jssor滑塊，我從數據庫中填充了圖像的ng-src path屬性：

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

上面的代碼由Jssor.com制作的Js文件進一步解釋，將其轉換為下面的代碼，根據瀏覽器，該代碼對於圖像部分可以正常工作：

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

但不適用於瀏覽器中顯示的縮略圖部分，如下所示：

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

我上面沒有提到任何src標記（只有ng-src ），因為{{}}之間的表達式必須由AngularJs解釋。

更新 ： img.img和img.thumb包含以下內容：

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

編輯 ：按照Jssor團隊的要求，在Angular呈現的有關縮略圖部分的最終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>

Answer 1

如果網址正確，您的代碼似乎可以正常工作，也許還有另一個與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>