Góc 2 img src theo đường dẫn tương đối

Question

Hướng dẫn kiểu johnpapa góc 2 gợi ý phương thức folder-by-feature. Tôi có ý tưởng, bạn có thể tự tạo ra các thành phần góc nhỏ có thể được tái sử dụng.

Vì vậy, tôi đã tạo thành phần tôi muốn sử dụng lại trong một dự án khác và đặt nó vào thư mục riêng của nó. Tôi cũng đã thêm một hình ảnh mà tôi muốn thành phần này hiển thị vào cùng một thư mục, vì vậy tất cả đều chứa đựng.

<img class="logo" src="logo.png"/> 

Nhưng điều này cố gắng sau đó tải các hình ảnh từ gốc localhost:3000/logo.png.

Tôi cho rằng điều này có nghĩa là tôi phải thực sự sử dụng đường dẫn chính xác đến hình ảnh, nhưng điều này không làm suy yếu toàn bộ ý tưởng về các thành phần có thể được tái sử dụng trong dự án khác của người khác?

Đề xuất về điều này?

Chỉnh sửa để làm rõ Tôi đang sử dụng cấu trúc thư mục từ 2 quickstart kiễu góc, có nghĩa là thư mục gốc của tôi là:

app/ 
node_modules/ 
index.html 
package.json 
tsconfig.json 

Vì vậy, ngay cả khi tôi sử dụng tiêu đề path/logo.png, nó không hoạt động. Tôi phải làm app/header/logo.png. Đây thực sự là một đường dẫn tuyệt đối và trên thực tế cũng hoạt động như nhau nếu tôi thêm dấu gạch chéo hàng đầu: "/app/header/logo.png". Bất kỳ điều gì nhỏ hơn đường dẫn đầy đủ sẽ phá vỡ liên kết. Có nghĩa là nếu ai đó muốn sử dụng lại điều này, họ sẽ phải có cấu trúc thư mục giống nhau.

Tôi đoán đây chỉ là cách hoạt động, tôi chỉ học Angular 2, nhưng trong tâm trí tôi có thể tải nội dung từ bên trong thư mục thành phần giống như tôi có thể với mẫu hoặc css

Answer 1

Tôi đang sử dụng gói web và đã có thể khắc phục vấn đề này bằng cách require nhập hình ảnh vào thành phần dưới dạng biến và sử dụng mẫu này trong mẫu của tôi.

Điều này là do trong quá trình gói webpack gói sẽ tải tài nguyên và lưu trữ URL chính xác và yêu cầu gọi trong thời gian chạy sẽ nhận URL chính xác này để chuyển tới mẫu.

---

Ví dụ

Sử dụng cấu trúc thư mục sau

app/ 
    header/ 
     header.component.ts 
     header.component.html 
     assets/ 
      logo.png 
... 

header.component.ts

... 
@Component({ 
    selector: 'header', 
    templateUrl: './header.component.html', // Auto required by webpack 
}) 
export class HeaderComponent { 
    private LOGO = require("./assets/logo.png"); 

    constructor() {}; 
} 

header.component.html

<div> 
    <img [src]="LOGO" /> 
</div> 

---

Phải thừa nhận rằng đây liên kết với các thành phần và mẫu nhưng đòi hỏi cần phải có trong thành phần để webpack có khả năng phân tích và tải nó khi bundling.

---

Với phương pháp này, tôi đã đóng gói mô-đun bằng npm và được cài đặt và sử dụng nó trong một dự án khác - cũng sử dụng gói webpack.

Tôi chưa thử nghiệm với SystemJS.

Answer 2

Sử dụng một thư mục nội dung trong thư mục gốc của bạn có chứa các hình ảnh logo

Answer 3

tôi sẽ giải quyết vấn đề này bằng cách tách con đường src thành 2 phần, như thế này:

<img class="logo" src="{{imgPath + imgFileName}}" /> 

sau đó, bên trong định nghĩa thành phần , bạn đặt:

@Input() imgPath:string = "app/header/"; 
imgFileName:string = "logo.png"; 

Bằng cách sử dụng trình trang trí @Input(), biến imgPath có thể được nhìn thấy bên ngoài, để trường hợp bạn di chuyển thành phần khác có thể thiết lập một con đường khác, làm cho thành phần có thể tái sử dụng được.

Answer 4

Nếu vấn đề là một lỗi 404 bạn cần phải thay đổi con đường của bạn

từ path/hình ảnh (root/path/hình ảnh, /path/hình ảnh vv)

để ./path/image

Sau đó, nó sẽ hoạt động nếu không có bất kỳ vấn đề nào khác.

Answer 5

Kiểm tra câu trả lời này: how to serve up images in angular2

Điều quan trọng là cả hai đặt nó vào "tài sản" thư mục hoặc để chỉnh sửa ".angular-cli.json" tập tin (tài sản phần) của bạn để bao gồm các vị trí nơi hình ảnh được đặt. Điều này cũng đúng đối với các tài nguyên khác được cho là được phân phát, tức là các tờ định kiểu.