Wie kann ich das Bild in Angular anzeigen lassen?

Question

Ich arbeite noch an meinem ersten Angular-Projekt, und jetzt muss ich anfangen, die Seite (n) ein wenig besser aussehen zu lassen, und ich möchte ein Bild hinzufügen.

Ich weiß in Html ist es einfach <img src="*"> aber eckig lädt nicht wirklich das Bild auf die Seite.

Meine Komponentendatei sieht wie folgt aus:

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'; 
} 

ich auch durch einige andere Fragen haben gesucht, und ich habe ein paar Probleme mit einigen von ihnen. Erstens, warum empfehlen sie, die eckigen Klammern um das Attribut src zu verwenden? Zweitens, warum können wir nicht einfach src="pathToImg.jpg" verwenden?

für weitere Einzelheiten hier ist meine Ordnerstruktur:

Answer 1

Sie nur die eckigen Klammern verwenden, wenn Sie eine Variable verwenden möchten. dh <img [src]="myVariableContainingPath" /> Wenn Sie den Pfad fest codieren möchten, können Sie den normalen Weg von <img src="myPath.jpg" /> ohne die eckigen Klammern machen.

Eckige Klammern = Einfügen eines Wertes aus einer Variablen.

Hoffe, dass die Dinge ein wenig aufklärt.