Bài mẫu có ảnh
Bài này để minh hoạ cách chèn ảnh: một ảnh bìa và một ảnh trong thân bài, cả hai đều được tối ưu tự động lúc build.
Bài này tồn tại để cho thấy ảnh hoạt động thế nào. Xoá đi khi có bài thật.
Ảnh bìa
Khai báo trong frontmatter, đường dẫn tính từ chính file .md này:
cover: "../../../assets/posts/chuyen-di-mau-bia.jpg"
coverAlt: "Mô tả ảnh — bắt buộc nên có"Ảnh bìa xuất hiện ở hai nơi: làm thumbnail trên thẻ ở trang danh sách, và làm ảnh
lớn đầu bài viết. Không khai báo cover thì thẻ chỉ có chữ — vẫn đẹp, không sao.
Ảnh trong thân bài
Viết Markdown bình thường, dùng đường dẫn tương đối:
Cú pháp là . Phần trong ngoặc vuông là alt text — luôn
viết, vì đó là thứ Google đọc và là thứ người dùng screen reader nghe được.
Vì sao lại đặt ảnh trong src/assets/
Có hai chỗ đặt ảnh, khác nhau quan trọng:
| Đặt ở | Kết quả |
|---|---|
src/assets/ |
Astro tối ưu tự động: sinh WebP, nhiều kích thước, thêm width/height |
public/ |
Copy y nguyên, không tối ưu gì |
Dùng src/assets/ gần như luôn tốt hơn. Ảnh máy ảnh 4 MB sẽ được tự cắt thành
vài phiên bản WebP nhẹ hơn nhiều, và browser tự chọn cỡ phù hợp với màn hình.
Thuộc tính width/height được điền sẵn nên trang không bị nhảy layout khi ảnh
tải xong.
Đường dẫn sai hay thiếu file thì build fail ngay kèm thông báo rõ — không có chuyện ảnh hỏng âm thầm rồi phát hiện sau khi đã đăng.