角度-如何在<h></h>标签内的图像中显示

我正在开发一个PHP/Laravel应用程序,其中一个页面上有一个表单,它显示了一个表,该表显示了通过网站进行的各种事务的信息。

表中的一列标题为“联系人”,并显示负责该事务的人员的详细联系信息。此列中的每个单元格还显示一个“编辑”按钮,该按钮将打开一个对话框,允许用户添加/删除/更改将为此事务显示其详细信息的联系人。

当前,当用户单击“编辑”按钮并显示对话框时,“编辑”按钮图标将变为“X”以允许他们关闭对话框,但对话框本身会显示在页面上该位置的略下方,因此似乎有许多用户不知道如何关闭对话框。

我想在对话框中添加一个“X”按钮,允许用户通过单击该按钮来关闭它。

显示此表格单元格的HTML&对话框是:

<td data-heading="Provisional Contact" class="provContactCell table__priority-column" id="fixPayerName">
    <i class="icon icon-pencil" [class.icon-close-selected]="payer.showProvContactSelector" (click)="toggleProvContactSelector(payer)">
    </i>
    ...
    <div class="provContactSelector" *ngIf="payer.showProvContactSelector">
        <h3>Provisional Contacts &amp; Managers</h3>
            <button class="icon icon-close-selected" (click)="toggleProvContactSelector(groupPayer)"></button>
            <p>Check/un-check which contacts should be provisional contacts and managers.</p>
            <div class="provContacts">
                ...
            </div>
        </div>
    </div>
</td>

<h></h> <h></h> 标签,我在控制台中得到错误,页面没有正确加载。。。

控制台错误包括:

vendor.bundle.js?ver=1486951446:54441错误:Uncaught(in promise):错误:加载chunk common失败。

位于HTMLScriptElement.onScriptComplete(inline.bundle.js?ver=1432283697:104) 位于HTMLScriptElement.wrapFn(polyfills.bundle.js?ver=450735834:6545) 在Object.onInvokeTask(vendor.bundle.js?ver=1486951446:57733) 在ZoneDelegate.webpackJsonp../node\u modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask(polyfills.bundle.js?ver=450735834:5799) 在Zone.webpackJsonp../node\u modules/Zone.js/dist/Zone.js.Zone.runTask(polyfills.bundle.js?ver=450735834:5567) 在ZoneTask.webpackJsonp../node\u modules/zone.js/dist/zone.js.ZoneTask.invokeTask[as invoke]

<h></h>

我还尝试了显示对话框标题&单击表中的“关闭”按钮,以查看这样做是否会使布局正确:

<div class="provContactSelector" *ngIf="payer.showProvContactSelector">
    <table id="dialogTitle">
        <tr>
            <td>
                <h3>Provisional Contacts &amp; Managers</h3>
            </td>
            <td>
                <button class="icon icon-close-selected" (click)="toggleProvContactSelector(false)"></button>
            </td>
        </tr>
    </table>
    ...
</div>

但这样做只会导致退出按钮再次显示在对话框标题下。。。有人有什么想法吗?

编辑

<h3 style="display: inline-block">Provisional Contacts &amp; Managers</h3><button type="button" (click)="toggleProvContactSelector(grouopPayer)"><img src="c:\Users\...\icon-close.png"></button>

我现在可以看到图像显示在对话框的正确位置(在对话框标题旁边)。但是,图像似乎没有正确呈现-它只是显示一个“.png”文件图标,而不是显示实际的图像。

另外,当我单击联系人单元格中的“编辑”图标打开对话框时,控制台显示一个错误:

错误类型错误:无法读取未定义的属性“showProvContactSelector”

这个 showProvContactSelector 变量是给 ngIf 在 <div> 本声明 <h></h>

有人对如何解决这个问题有什么建议吗?

编辑

因此,我添加的图像没有正确显示的原因似乎是因为它位于项目目录之外(尽管我已经指定了完整的文件路径)。我将其更改为使用项目目录中的图像文件:

<h3 style="display: inline-block">Provisional Contacts &amp; Managers <i class="icon icon-close-selected" (click)="toggleProvContactSelector(groupPayers.selectedPayer)"></i></h3>

style="display: inline-block" 属性,以便使其与标题文本显示在同一行上。