วิธีโหลดรูปภาพ (และทรัพย์สินอื่น ๆ ) ใน Angular an project?

ฉันค่อนข้างใหม่กับ Angular ดังนั้นฉันจึงไม่แน่ใจว่าแนวทางปฏิบัติที่ดีที่สุดในการทำเช่นนี้

ฉันใช้ angular-cli และng new some-projectสร้างแอปใหม่

ในนั้นได้สร้างโฟลเดอร์ "images" ในโฟลเดอร์ "assets" ดังนั้นตอนนี้โฟลเดอร์ภาพของฉันคือ src/assets/images

ในapp.component.html(ซึ่งเป็นรากของแอปพลิเคชันของฉัน) ฉันใส่

<img class="img-responsive" src="assets/images/myimage.png">

เมื่อฉันng serveจะดูเว็บแอปพลิเคชันของฉันภาพไม่ปรากฏขึ้น

แนวทางปฏิบัติที่ดีที่สุดในการโหลดภาพในแอปพลิเคชัน Angular คืออะไร?

แก้ไข: ดูคำตอบด้านล่าง ชื่อรูปภาพจริงของฉันใช้ช่องว่างซึ่ง Angular ไม่ชอบ เมื่อฉันลบช่องว่างในชื่อไฟล์ภาพจะแสดงอย่างถูกต้อง

ฉันซ่อมมัน. ชื่อไฟล์ภาพที่แท้จริงของฉันมีช่องว่างอยู่และด้วยเหตุผลใดก็ตามที่ Angular ไม่เป็นเช่นนั้น เมื่อฉันลบช่องว่างออกจากชื่อไฟล์ของฉันใช้assets/images/myimage.pngงานได้

ในโครงการของฉันฉันใช้ไวยากรณ์ต่อไปนี้ใน app.component.html ของฉัน:

<img src="/assets/img/1.jpg" alt="image">

หรือ

<img src='http://mruanova.com/img/1.jpg' alt='image'>

ใช้ [src] เป็นนิพจน์เทมเพลตเมื่อคุณผูกคุณสมบัติโดยใช้การแก้ไข:

<img [src]="imagePath" />

เหมือนกับ:

<img src={{imagePath}} />

ที่มา: วิธีการผูก img src ใน angular 2 ใน ngFor?

Angular-cli รวมโฟลเดอร์ assets ไว้ในตัวเลือกการสร้างตามค่าเริ่มต้น ฉันพบปัญหานี้เมื่อชื่อรูปภาพของฉันมีช่องว่างหรือขีดกลาง ตัวอย่างเช่น :

• "my-image-name.png" ควรเป็น "myImageName.png"
• 'my image name.png' ควรเป็น 'myImageName.png'

หากคุณใส่รูปภาพในโฟลเดอร์ assets / img โค้ดบรรทัดนี้ควรใช้งานได้ในเทมเพลตของคุณ:

<img alt="My image name" src="./assets/img/myImageName.png">

หากปัญหายังคงมีอยู่ให้ตรวจสอบว่าไฟล์กำหนดค่า Angular-cli ของคุณหรือไม่และตรวจสอบให้แน่ใจว่ามีการเพิ่มโฟลเดอร์สินทรัพย์ในตัวเลือกการสร้าง

เฉพาะสำหรับ Angular2 ถึง 5 เราสามารถผูกเส้นทางรูปภาพโดยใช้คุณสมบัติการผูกด้านล่าง เส้นทางรูปภาพถูกล้อมรอบด้วยเครื่องหมายอัญประกาศเดี่ยว

ตัวอย่างตัวอย่าง

<img [src]="'assets/img/klogo.png'" alt="image">

โดยปกติ "แอป" เป็นรากของแอปพลิเคชันของคุณคุณลองapp/path/to/assets/img.pngหรือยัง?

1. เพิ่มบรรทัดนี้ที่ด้านบนในส่วนประกอบ

declare var require: any

2. เพิ่มบรรทัดนี้ในคลาสส่วนประกอบของคุณ

imgname= require("../images/imgname.png");

3. เพิ่ม 'imgname' นี้ในแท็ก img src บนหน้า html

   <img src={{imgname}} alt="">

สำหรับฉัน "ฉัน" เป็นทุนใน "รูปภาพ" ซึ่งยังไม่ชอบ angular-cli ดังนั้นจึงเป็นกรณีที่ละเอียดอ่อน

ขึ้นอยู่กับว่าไฟล์ html ของคุณอยู่ที่ไหนซึ่งอ้างถึงเส้นทางของทรัพยากรแบบคงที่ (ในกรณีนี้คือรูปภาพ)

ตัวอย่าง A:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yourpage.html

ในขณะที่คุณสามารถดู yourpage.html เป็นหนึ่งโฟลเดอร์ห่างจากราก (โฟลเดอร์ src) ด้วยเหตุผลนี้มันต้องจำนวนหนึ่ง../ที่จะกลับไปยังรากไปแล้วคุณสามารถเดินไปยังภาพจากราก:

<img class="img-responsive" src="../assests/images/myimage.png">

ตัวอย่าง B:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yoursubmodule
      |__yourpage.html

ที่นี่คุณต้องไปที่ต้นไม้ 2 โฟลเดอร์:

<img class="img-responsive" src="../../assests/images/myimage.png">