Question

您好我正在尝试使用angularjs建立一个网站。图像未显示，但图像链接位置正在显示。控制器的代码如下：

 app.controller('MainController', ['$scope', function($scope) {
$scope.apps = [
    {
        icon: '/img/skype.jpg',
        title: 'Skype - free IM & video calls',
        developer: 'Skype',
        price: 3
    }

这是我的HTML代码：

    <div class="main" ng-controller="MainController">
<div class="container">
    <div class="card" ng-repeat="app in apps">
        <app-info info="app"></app-info>
        <install-app></install-app>
    </div>
</div>

以下是app-info代码：

    app.directive('appInfo', function() {
return {
    restrict: 'E',
    scope: {
        info: '='
    },
    templateUrl: 'js/directives/appInfo.html'
};

}）;

这是app-info html代码：

<img class="icon" ng-src="{{ info.icon }}">
<h2 class="title">{{ info.title }}</h2>
<p class="developer">{{ info.developer }}</p>
<p class="price">{{ info.price | currency }}</p>

Answer 1

您需要在appInfo指令中提供代码。

您可以添加appInfo指令模板代码，例如

<img src="{{info.icon}}"> or <img ng-src="{{info.icon}}">

另外，检查您的图标是否正在传递给您的指令

app.directive('appInfo', function() {
return {
    restrict: 'E',
    scope: {
        info: '='
    },
    templateUrl: 'js/directives/appInfo.html',
    link: function(scope, element) {
       console.log(scope.info.icon);
    }
};

Answer 2

 app.controller('MainController', function($scope) {
$scope.image =
    {
        icon: '/img/skype.jpg',
        title: 'Skype - free IM & video calls',
        developer: 'Skype',
        price: 3
    }

您的HTML代码

<div class="main" ng-controller="MainController">
<div class="container">
    <div class="card">
        <img ng-src="{{image.icon}}">
    </div>
</div>

图像未从控制器加载

2 个答案: