使用 Angular JS 使图像出现在弹出窗口上

这是我在 StackOverflow 上的第一篇文章，我正在自学 Angular，所以我是一个初学者，目前很困惑。

我正在使用 Angular 创建一个网页，其中一个页面涉及一个按钮和一个弹出窗口。我想将图像放入弹出窗口中，但在实现此操作时遇到很多麻烦。

步骤和名称属性成功出现在弹出窗口中，但图像不起作用。我尝试过让 url 显示为字符串，但这也不起作用。

我还尝试让 id 属性（只是一个字符串）出现，但这也不起作用。

我在 html 中的 ctrl.figure 周围只放了一组大括号，因为这至少会让我在弹出窗口中看到一个损坏的图片图标，而如果我按照通常建议的那样使用两个大括号，我什么也得不到。

我在本地计算机上托管该网站，并使用 Chrome 开发工具，不断收到一条消息，提示找不到该文件。我已经多次检查了文件路径，看起来没问题。由于我无法让图形的 url 仅显示为字符串，因此我认为问题可能与控制器有关。

任何建议将不胜感激。第一组代码是弹出窗口的 html，第二组代码来自控制器。

<!--Overlay div for popup window-->
    <div ng-show= "ictrl.showValue" class="instAbsolute col-xs-12 col-md-10 ng-cloak">
        <span class= "glyphicon glyphicon-remove pull-right" ng-click = "ictrl.hideDetails()"></span>
        <h4 class = "text-muted" >{{ictrl.step}}</h4>
        <h1 class = "text-grey">{{ictrl.name}}</h1>
        <h1 class = "text-grey">{{ictrl.id}}</h1>
        <div ng-bind-html="ictrl.description">
        </div>
          <img class= "img-responsive" ng-src="{ictrl.figure}" alt="{{ictrl.alt}}">
    </div> 
   </div> <!--end of controller -->
</div> <!--end of app -->

angular.module('instructionsApp', ['ngSanitize']).controller('instructionsCtrl',[

    function() {
        var self = this;
        self.showValue = false;
        self.showDetails = function(id) {
            for (var i = 0; i < this.steps.length; i++) {
                if (self.steps[i].id === id) {
                    self.name = self.steps[i].name;
                    self.step = self.steps[i].step;
                    self.description = self.steps[i].description;
                    self.showValue = true;
                }
            }
        };
        self.hideDetails = function() {
            self.showValue = false;
        };
        self.steps = [{
        {
            name: "Attach Camera",
            id: "S1",
            step: "Setup",
            description: "<p>There are many ways to attach you camera to your laptop.&nbsp; For digital camera output, we recommend connecting the camera with a wire to the faster firewire port &ndash; but the USB port will also work.&nbsp; As an example, for analog camera output you can use an external capture device (such as the Dazzle from Pinnacle) with a 3-port composite connector into the camera and a USB connection on the other end of the cable into the laptop.&nbsp; Also, there are many ways to interface a camera to an internal video capture card.&nbsp; See illustrations below:<\/p>"
        }, {
            name: "Launch VazztCaster",
            id: "S2",
            step: "Setup",
            figure: "../img/instructionsImages/launchVazztCaster.jpg",
            description: "<p>Launch the VazztCaster.exe program on your laptop by clicking on the Vazzt icon (red V) on your desktop. &nbsp;After launch, on the home page of VazztCaster click on the Login Icon (person) and enter the Credentials:<\/p><p>Next Click on the Video Settings Icon (blue camcorder)&nbsp; and enter your choice of&nbsp;<\/p><p>&nbsp;<\/p><p>Note that the VazztCaster will automatically set default values, if possible, in the Video Settings fields based on the camera attached, the IP networks it finds, and the audio equipment attached:<\/p><ul><li>Video Capture Devices<\/li><li>Video Resolution<\/li><li>Video Bandwidth<\/li><li>Aspect Ratio<\/li><li>Audio Capture Device<\/li><li>And other Audio parameters.&nbsp;<\/li><\/ul><p>However, you can manually override these.&nbsp; Click the OK button when you are finished.<\/p><p>Most cameras will automatically provide notification of the various resolutions that the camera can support.&nbsp; VazztCaster can detect this and by examining the bandwidth detected, also automatically, VazztCaster sets default resolution and bandwidth.<\/p><p>&nbsp;<\/p><p>&nbsp;<\/p>",
            alt: "Launch VazztCaster",
            imageCaption: "After launching VazztCaster, this is what your screen should look like."
        }];
    }
]);

在你的 instructionsController.js 中 -

self.showDetails = function(id) {
    for (var i = 0; i < this.steps.length; i++) {
        if (self.steps[i].id === id) {
            self.name = self.steps[i].name;
            self.step = self.steps[i].step;
            self.description = self.steps[i].description;



    ## self.figure = self.steps[i].figure;
    ## self.alt = self.alt[i].alt;
    ## self.imageCaption = self.imageCaption[i].imageCaption

            self.showValue = true;
        }
    }
};

开头的行##是您需要添加的内容所以基本上您忘记了循环上面突出显示的行。 希望这可以帮助。