如何在Android手机上的AngularJS中使用img ng-src? [英] How to use img ng-src in AngularJS on android phone?
问题描述
最相关的问答我发现来自 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:
</幻灯片></轮播>
我的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屋!