Javascript 如何以角度显示图像

我仍然在做我的第一个Angular项目，现在我需要开始让页面看起来更好一点，我想添加一个图像

我知道在Html中，它只是简单地

，但angular实际上并没有将图像加载到页面中

我的组件文件如下所示：

import { Component } from '@angular/core';



@Component({
  selector: 'my-app',
  styles: ['.container-fluid{ border: 1px solid black; margin: 10px; padding: 
10px; border-radius: 20px;}','.qr-image{ width: 100px ;}'],
  template: `
    <h1> Regional Forum Report Registration</h1>
    <div class='container-fluid'>
        <form-area></form-area>
    </div>
    <div class="qr-code">
      <h3> Long Line? Scan this code to SignUp!</h3>
      <img class='qr-image' alt='Address for Signup Page' [src]="qrpath">
    </div>
    `
})
export class AppComponent {
  this.qrpath = '/app/rf.png';
}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
样式：['.容器流体{边框：1px纯黑色；边距：10px；填充：
10px；边框半径：20px；}'，qr图像{宽度：100px；}']，
模板：`
区域论坛报告登记
长线？扫描此代码以注册！
`
})
导出类AppComponent{
this.qrpath='/app/rf.png'；
}

我还研究了其他一些问题，其中一些问题我有一些疑问。首先，为什么他们建议在

src

属性周围使用方括号？其次，为什么我们不能直接使用

src=“pathToImg.jpg”

有关详细信息，请参见我的文件夹结构：

---

只有在使用变量时才使用方括号。ie

如果要对路径进行硬编码，可以使用不带方括号的

的常规方法

方括号=插入变量中的值

---

希望这能让事情变得更清楚一点。

的确如此，只需问一下为什么它不能只处理

浏览器所期望的位置中的图像？浏览器开发工具说什么？derp。文件路径问题。必须记住需要相对于Index.html的路径。。。。