Question

我有以下项目结构：

MyProject
    - platforms
    - plugins
    - resources
    - www
        - css
        - img
        - js
        - views
        - index.html

我的index.html简单明了：

<!DOCTYPE html>
<html data-ng-app="myProject">

<head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

    <link rel="stylesheet" type="text/css" href="css/app.css">
</head>

<body>
    <div ng-view></div>

    <!--<script type="text/javascript" src="cordova.js"></script>-->
    <script type="text/javascript" src="js/libs/angular.js"></script>
    <script type="text/javascript" src="js/libs/angular-route.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</body>

</html>

我的app.js如下：

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

myProject.config(function ($routeProvider) {
    $routeProvider.when('/', {
        controller: 'RootController',
        templateUrl: 'views/RootControllerView.html'

    }).when('/theaters', {
        controller: 'TheatersController',
        templateUrl: 'views/TheatersControllerView.html'

    }).when('/settings', {
        controller: 'SettingsController',
        templateUrl: 'views/SettingsControllerView.html'

    }).otherwise({
        redirectTo: '/'
    });
});

///////// CONTROLERS ////////////////////////////

myProject.controller('RootController', function ($scope, recommendedMoviesFactory) {

    // Controller is going to set recommendedMovies
    // variable for the $scope object in order for view to
    // display its contents on the screen as html 
    $scope.recommendedMovies = [];

    // Just a housekeeping.
    // In the init method we are declaring all the
    // neccesarry settings and assignments
    init();

    function init() {
        $scope.recommendedMovies = recommendedMoviesFactory.getRecommended();
    }
});

myProject.controller('TheatersController', function ($scope, theatersFactory) {

    // This controller is going to set theaters
    // variable for the $scope object in order for view to
    // display its contents on the screen as html 
    $scope.theaters = [];

    // Just a housekeeping.
    // In the init method we are declaring all the
    // neccesarry settings and assignments
    init();

    function init() {
        $scope.theaters = theatersFactory.getTheaters();
    }
});

myProject.controller('SettingsController', function ($scope) {

});

///////////// FACTORIES ////////////////////////////

myProject.factory('recommendedMoviesFactory', function () {
    var recommended = [
        {
            name: 'World War Z',
            description: 'The story revolves around United Nations employee Gerry Lane (Pitt), who traverses the world in a race against time to stop a pandemic',
            img: 'img/wardwarz.png'
        },
        {
            name: 'Star Trek Into Darkness',
            description: 'When the crew of the Enterprise is called back home, they find an unstoppable force of terror from within their own organization has detonated the fleet and everything it stands for',
            img: 'img/intodarkness.png'
        },
        {
            name: 'The Iceman',
            description: 'Appearing to be living the American dream as a devoted husband and father in reality Kuklinski was a ruthless killer-for-hire.',
            img: 'img/iceman.png'
        },
        {
            name: 'Iron Man 3',
            description: 'When Stark finds his personal world destroyed at his enemys hands, he embarks on a harrowing quest to find those responsible.',
            img: 'img/ironman.png'
        },
        {
            name: 'Django Unchained',
            description: 'Set in the South two years before the Civil War, Django Unchained stars Jamie Foxx as Django',
            img: 'img/django.png'
        }
    ];

    var factory = {};

    factory.getRecommended = function () {
        return recommended;
    }

    return factory;
});

myProject.factory('theatersFactory', function () {
    var theaters = [
        {
            name: 'Everyman Walton',
            address: '85-89 High Street London'
        },
        {
            name: 'Ambassador Cinemas',
            address: 'Peacocks Centre Woking'
        },
        {
            name: 'ODEON Kingston',
            address: 'larence Street Kingston Upon Thames'
        },
        {
            name: 'Curzon Richmond',
            address: '3 Water Lane Richmond'
        },
        {
            name: 'ODEON Studio Richmond',
            address: '6 Red Lion Street Richmond'
        }
    ];

    var factory = {};

    factory.getTheaters = function () {
        return theaters;
    }

    return factory;
});

RootControllerView：

<header>
    <h1>Pomidoro App</h1>
</header>
<nav>
    <form>
        <input type="search" placeholder="Search">
    </form>
</nav>
<nav>
    <ul>
        <li>
            <a href="/">
                <img src="../img/ic_logout.png">
                <div>Movies</div>
            </a>
        </li>
        <li>
            <a href="#/theaters">
                <img src="../img/ic_profile.png">
                <div>Theaters</div>
            </a>
        </li>
        <li>
            <a href="#/settings">
                <img src="../img/ic_settings.png">
                <div>Settings</div>
            </a>
        </li>
    </ul>
</nav>
<div>
    <ul>
        <li>Recommended movies</li>
        <li data-ng-repeat="movie in recommendedMovies">
            <a href="#/theaters">
                <div><img src="../img/ic_settings.png">
                </div>
                <strong>{{movie.name}}</strong>
                <br />
                <p>{{movie.description}}</p>
                <span></span>
            </a>
        </li>
    </ul>
</div>

正如您所看到的，我只是介绍一些关于某些视频的信息。它来自this tutorial。但是......当我现在在我的Android设备上启动应用程序时...图像没有加载。没有img出现，但是这些都是正确的。

为什么图像不显示？

修改1

我也用

在服务器上试过了

cordova serve android

还有图片没有加载。

Answer 1

此处使用的路径不正确。 img代码的来源与您的应用相关，而不是相对于视图的位置。您所关注的示例不使用../，您也不应该使用它。

您应该使用<img src="../img/ic_logout.png">。

，而不是使用<img src="img/ic_logout.png">

Angular将您的视图注入ng-view元素内的页面。视图可能位于/views/目录中，但页面本身不是。该页面仍在根目录下，浏览器不知道/views/目录，无法处理../标记中的src。 Angular 从不使用相对于视图模板的文件位置。

Cordova + Angular：图片未显示

1 个答案: