어떻게 이미지를 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

당신이 변수를 사용하려는 경우에만 대괄호를 사용합니다. ie <img [src]="myVariableContainingPath" /> 경로를 하드 코딩하려면 대괄호없이 정상적인 방법으로 <img src="myPath.jpg" />을 수행 할 수 있습니다.

대괄호 = 변수에서 값을 삽입합니다.

약간의 것들을 지우는 희망.