如何在Angular中顯示圖像

Question

仍然在我的第一個Angular項目上工作，現在我需要開始使頁面看起來更好一些，並且我想要添加圖像。

我知道Html它只是簡單的<img src="*">但角實際上並沒有加載圖像到頁面。

我的組件文件看起來是這樣的：

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

當你想使用一個變量，您只用方括號。即<img [src]="myVariableContainingPath" />如果您想對路徑進行硬編碼，您可以使用不帶方括號的<img src="myPath.jpg" />的常規方式。

方括號=插入變量的值。

希望清除一點東西。