如何在Angular中显示图像

Question

仍然在我的第一个Angular项目上工作，现在我需要开始使页面看起来更好一些，并且我想要添加图像。

我知道在Html中它只是<img src="*">，但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';
}

我还查看了其他一些问题，我和其中一些问题有些问题。首先，他们为什么建议在src属性周围使用方括号？其次，为什么我们不能只使用src="pathToImg.jpg"？

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

Answer 1

如果要使用变量，只能使用方括号。 ie <img [src]="myVariableContainingPath" />如果你想对路径进行硬编码，你可以按<img src="myPath.jpg" />的正常方式进行，而不使用方括号。

方括号=从变量中插入一个值。

希望能稍微清理一下。