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

查看:27
本文介绍了如何在Android手机上的AngularJS中使用img ng-src?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

最相关的问答我发现来自 google 组,我已经阅读ngSrc 的 AngularJS 文档.

我正在尝试使用 Angular UI Bootstrap - Carousel 在我的应用程序,我注意到该演示为幻灯片使用了绝对 URL,如下所示:image: 'http://placekitten.com/' + newWidth + '/300'.

它在我的本地主机 (mac) 上工作,但我不认为图像(幻灯片)显示在我的 android google nexus 手机上,因为我只使用这样的相对图像路径:image: '/images/help/hello-1.jpg'.

如何在没有 http:// 的 Android 手机上使用带有 ng-src 指令的相对图像路径?正在使用 $location 一个可能的解决方案(来自这个问题)?

我的 html:

<div><轮播间隔=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>联系我们</p></a>

</幻灯片></轮播>

我的js:

'use strict';var app = angular.module('helloApp');app.controller('helloCtrl', function ($scope) {$scope.slides = [{图像:'/images/hello-1.jpg',标题:'Help1',文字:Lorem ipsum dolor 坐 amet,consectetur adipisic."},{图像:'/images/hello-2.jpg',标题:'Help2',文本:Lorem ipsum dolor 坐 amet,consectetur adipisicing elit,sed do."}];});

解决方案

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

新的 html:

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

新的js:

<代码>...{图像:'hello-1.jpg',...},{图像:'hello-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:help@help.com?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',
      ...
    }
  ...

这篇关于如何在Android手机上的AngularJS中使用img ng-src?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆