Angular无法在手机上找到本地图像

Question

我正在尝试将Angular中的图像加载到img标记中。当我将类似'ImageMap.jpg'的完整路径直接输入到html中的src字段时，图像加载会找到。但是当我在Angular中设置它不起作用时，它找不到图像。这发生在我测试的所有设备上，我在帖子的底部包含了WP模拟器的屏幕截图。 我使用Cordova构建了应用程序。

这有效

    <img ng-src="ImageMap.jpg"  class="stretch" ng-show="true">

这不是

    <img ng-src="{{ gifSource }}"  class="stretch" ng-show="true">

我在控制器的第一行设置了值

    angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('ModalDemoCtrl', function ($scope, $modal, $log) {
    $scope.gifSource = "ImageMap.jpg";

这适用于Chrome，但不适用于WP模拟器/设备。

我在HTML中添加了这一行来检查路径是否设置，它确实如此。该文件与index.html一起位于根文件夹中

 <b> Path: {{ gifSource }}</b>

Answer 1

我有一个类似的问题，但我修正了在将应用程序的绝对路径定义为值并将该值放入＆＃34; ng-src＆＃34;属性以达到所需的图像。

例如：

var myApp = angular.module('myApp', ['ngRoute', 'myCtrl']);

myApp.value("basePath", "http://localhost/my/path/images/");

然后在控制器中：

myApp.controller('myCtrl', ['$scope', 'ngRoute', 'basePath', function($scope, basePath){

    // Use basePath value to get url and concatenate it with image
    $scope.basePath = basePath + 'myimage.png';

  }]);

通过这种方式，您可以在整个应用程序中传递您的值，只需更改图像名称即可使用不同的图像。