Question

ui-bootstrap似乎不会渲染我的图像。 - 使用常规<img ng-source ="">图像呈现就像他们想象的那样好。
- 当使用角度ui Carousel时，它们似乎不适合我。我一无所获。我现在还不确定问题是什么，这是我的代码片段。

<div style="height: 305px">
                        <uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
                            <uib-slide ng-repeat="image in selectedBridgeImages">
                                <img ng-src="{{getImage(image.Base64String)}}"/>
                                <div>
                                    {{image.Id}}
                                </div>
                            </uib-slide>
                        </uib-carousel>
                    </div>

这是我在角度控制器中使用的所有内容

$scope.selectedBridgeImages = [];
        $scope.getImage = function (data) {
            return 'data:image/JPEG;base64,' + data;
        }
        $scope.selectBridge = function (selectedBridge) {
            bridgeService.getBridgeDetails(selectedBridge.BridgeID).then(bridgeDetailsThen);
            $scope.isBridgeSelected = true;
            $scope.selectedBridge = selectedBridge;
        }
        var bridgeDetailsThen = function (response) {
            $scope.selectedBridgeImages = response.data.Picture;
        }

和C＃服务在这里调用

    [HttpGet]
    [Route("api/Bridge/GetBridgeDetails/{bridgeId}")]
    public IHttpActionResult GetBridgeDetails(int bridgeId)
    {
        try
        {
            using (_iBridge)
            {
                var details = _iBridge.GetBridgeDetailses(bridgeId);
                foreach (var picture in details.Picture) { picture.Base64String = Convert.ToBase64String(picture.PictureBytes); }
                return Ok(details);
            }
        }
        catch
        {
            return NotFound();
        }

    }

Answer 1

我遇到了同样的问题。首先，我尝试将uib-carousel和uib-slide包含在'div'标签内：之后我能够看到旋转木马的箭头，但仍然没有图像。我后来发现问题是uib-slide的'index'属性：看起来你应该提供一个索引，即使你不用它做任何事情。试试这段代码的修改版本：

<div style="height: 305px">
    <div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
        <div uib-slide ng-repeat="image in selectedBridgeImages track by $index" index="$index">
            <img ng-src="{{getImage(image.Base64String)}}" />
            <div>
                {{image.Id}}
            </div>
    </div>
</div>

UI Bootstrap轮播无法渲染图像

1 个答案: