如何使用IMG NG-SRC在Android手机上AngularJS？ [英] How to use img ng-src in AngularJS on android phone?

问题描述

最相关的问答集一个我发现是谷歌组和我读过 AngularJS为 ngSrc 文档

我试图使用角UI引导 - 旋转木马我的应用程序我注意到了演示使用绝对URL像这样的幻灯片：形象：http://placekitten.com/'+ newWidth +'/ 300'

它工作在我的本地（MAC），但我不认为我的谷歌Android Nexus手机上的图像（幻灯片）显示，因为我只用这样的相对图像路径：图像：'/图像/帮助/ HELLO-1.JPG。

我如何使用与 NG-SRC 指令相对图像路径，无需的http：// 在Android手机上？
中使用 $位置一个可能的解决方案（<一个href=\"http://stackoverflow.com/questions/21837851/angularjs-ng-src-in-ie8-image-not-loaded-and-unsafe-added-to-path\">from这个问题）？

我的HTML：

 ＆LT; D​​IV NG控制器=helloCtrl级=滑动容器＆GT;
  ＆LT; D​​IV＆GT;
    ＆LT;传送带间隔=myInterval＆GT;
      ＆LT;滑动NG重复=，在幻灯片幻灯片主动=slide.active＆GT;
        ＆LT; IMG NG-SRC ={{slide.image}}的风格=保证金：汽车;＆GT;
        ＆LT; D​​IV CLASS =旋转木马字幕＆GT;
          ＆LT; H3＆GT; {{slide.headline}}＆LT; / H3 GT＆;
          ＆所述p为H.; {{slide.text}}＆下; / P＆GT;
          ＆LT;一个NG-HREF =邮寄地址：[e-mail]主题=帮助探究级=menu_button＆GT;＆LT; P＆GT;联系我们＆LT; / P＆GT;＆LT; / A＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; /幻灯片＆GT;
    ＆LT; /转盘＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

我的JS：

 使用严格的;VAR应用= angular.module（'HELLOAPP'）;app.controller（'helloCtrl'，函数（$范围）{
  $ scope.slides = [
    {
      图片：/images/hello-1.jpg'，
      标题：Help1'，
      文本：Lorem存有悲坐阿梅德，consectetur adipisic。
    }，
    {
      图片：/images/hello-2.jpg'，
      标题：HELP2'，
      文本：Lorem存有悲坐阿梅德，consectetur adipisicing ELIT，SED做的。
    }
  ];
}）;
 

解决方案

出于某种原因，我不能使用文件路径与几个目录这样的形象：/images/hello-1.jpg 在我的JS。

新的HTML：

  ...
＆LT; IMG NG-SRC =图像/ {{slide.image}}的风格=保证金：汽车;＆GT;
...
 

新的JS：

  ...
    {
      图片：'你好-1.JPG，
      ...
    }，
    {
      图片：'你好-2.JPG'，
      ...
    }
  ...
 

The most relevant Q & A I've found is from google groups and I've read the AngularJS docs for ngSrc.

I'm trying to use Angular UI Bootstrap - Carousel in my app and I noticed the demo uses absolute URLs for slides like this: image: 'http://placekitten.com/' + newWidth + '/300'.

It works on my localhost (mac) but I don't think images (slides) display on my android google nexus phone because I only use relative image paths like this: image: '/images/help/hello-1.jpg'.

How can I use relative image paths with ng-src directive without having http:// on an android phone? Is using $location a possible solution (from this question)?

My 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:[e-mail]?subject=help-enquiry" class="menu_button"><p>Contact Us</p></a>
        </div>
      </slide>
    </carousel>
  </div>
</div>

my 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.'
    }
  ];
});

解决方案

For some reason I could not use a file path with several directories like this image: '/images/hello-1.jpg' in my js.

new html:

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

new js:

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

这篇关于如何使用IMG NG-SRC在Android手机上AngularJS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！