Question

最相关的Q＆amp;我找到的是google groups，我读过AngularJS docs for ngSrc。

我正在尝试在我的应用中使用Angular UI Bootstrap - Carousel，我注意到该演示使用了这样的幻灯片的绝对网址：image: 'http://placekitten.com/' + newWidth + '/300'。

它适用于我的localhost（mac），但我不认为我的Android google nexus手机上显示图像（幻灯片），因为我只使用这样的相对图像路径：image: '/images/help/hello-1.jpg'。

如何在Android手机上使用ng-src指令而不使用http://时使用相对图像路径？ 使用$location可能的解决方案（from this question）？

我的HTML

<div ng-controller="helloCtrl" class="slide-container">
  <div>
    <carousel interval="myInterval">
      <slide ng-repeat="slide in slides" active="slide.active">
        <img ng-src="{{slide.image}}" style="margin:auto;">
        <div class="carousel-caption">
          <h3>{{slide.headline}}</h3>
          <p>{{slide.text}}</p>
          <a ng-href="mailto:help@help.com?subject=help-enquiry" class="menu_button"><p>Contact Us</p></a>
        </div>
      </slide>
    </carousel>
  </div>
</div>

我的js：

'use strict';

var app = angular.module('helloApp');

app.controller('helloCtrl', function ($scope) {
  $scope.slides = [
    {
      image: '/images/hello-1.jpg',
      headline: 'Help1',
      text: 'Lorem ipsum dolor sit amet, consectetur adipisic.'
    },
    {
      image: '/images/hello-2.jpg',
      headline: 'Help2',
      text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.'
    }
  ];
});

Answer 1

出于某种原因，我无法在我的js中使用包含多个目录的文件路径，例如image: '/images/hello-1.jpg'。

新html：

...
<img ng-src="images/{{slide.image}}" style="margin:auto;">
...

新js：

...
    {
      image: 'hello-1.jpg',
      ...
    },
    {
      image: 'hello-2.jpg',
      ...
    }
  ...

如何在Android手机上的AngularJS中使用img ng-src？

1 个答案: