Dùng ảnh trong template

Ảnh có thể là một phần cố định của thiết kế, như logo, hoặc được dùng làm nền cho một page. Bạn có thể chọn ảnh đã lưu trong Assets của project, hoặc dùng đường dẫn HTTPS tới ảnh được lưu ở nơi khác.

Với ảnh dùng lại trong nhiều mẫu, Assets giúp bạn quản lý chúng ngay trong project và chọn trực tiếp từ editor.

1. Chọn ảnh từ Assets

Tải ảnh lên Assets của project. Trong editor, chọn phần cần dùng ảnh, mở Props, thêm một prop và chọn kiểu Asset. Bấm Select image để mở danh sách file, vào thư mục rồi chọn ảnh.

Ví dụ, đặt prop là logo. App lưu tham chiếu tới file đã chọn trong project, thay vì yêu cầu bạn dán URL tải ảnh vào mẫu.

Khi chọn lại ảnh cho prop này, các vị trí trong HTML đang đọc cùng prop sẽ dùng ảnh mới.

2. Hiển thị ảnh trong HTML

Trong HTML của section có prop logo, dùng:

<img src="{{ props.logo }}" alt="Logo" class="logo" />

Nếu logo là prop ở Global, dùng {{ global.props.logo }}. Đặt kích thước trong CSS của phần chứa ảnh:

.logo {
  width: 120px;
  height: 48px;
  object-fit: contain;
}

contain giữ trọn ảnh trong khung; cover lấp đầy khung và có thể cắt phần thừa. Chọn theo cách bạn muốn hiển thị, thay vì kéo giãn ảnh bằng cả chiều rộng và chiều cao.

3. Dùng ảnh làm nền

Để đặt nền chung, mở Global → Config → Page background và chọn ảnh. Để chỉ đặt cho một page, chọn page đó rồi mở Config → Background → Page background và bật nền riêng.

Các lựa chọn Size, Position và Repeat điều khiển cách ảnh phủ vùng nền. Ví dụ, Cover phủ kín vùng, Center đặt ảnh vào giữa và No repeat không lặp ảnh.

Header và Footer có phần Background riêng trong Config của chúng. Xem Header và Footer khi cần đặt ảnh vào vùng đầu hoặc cuối trang.

4. Dùng URL ảnh bên ngoài

Bạn có thể đặt URL HTTPS trực tiếp vào src khi workspace có quyền dùng ảnh bên ngoài. URL cần trả về file ảnh công khai, không phải trang web đang chứa ảnh hoặc đường dẫn yêu cầu đăng nhập.

<img src="https://example.com/images/banner.png" alt="" />

URL ảnh ngoài nhận PNG, JPEG, WebP, GIF và AVIF. Không nhận SVG từ URL ngoài; hãy upload SVG vào Assets rồi chọn qua prop Asset. URL cần dùng HTTPS cổng 443, không chứa tên đăng nhập/mật khẩu và trỏ tới địa chỉ công khai; đường chuyển hướng cũng được kiểm tra.

Giới hạn mỗi lần render: 5 MiB/ảnh, 30 MiB tổng, 100 request ảnh và 10 giây cho mỗi lần tải gồm chuyển hướng. URL công khai vẫn có thể lỗi vì định dạng, kích thước hoặc thời gian tải. Với gói cho dùng ảnh ngoài, tải ảnh thất bại sẽ làm render thất bại thay vì âm thầm bỏ ảnh.

Nếu ảnh mở được trong trình duyệt đã đăng nhập nhưng không xuất hiện khi tạo PDF, hãy kiểm tra đường dẫn có phụ thuộc cookie hoặc phiên đăng nhập không. Máy render cần tải ảnh độc lập với trình duyệt của bạn.

Với ảnh đã lưu trong Assets, dùng bộ chọn Asset thay vì sao chép URL xem trước. Khi quyền tài nguyên chưa cho phép, app sẽ hiển thị thông báo tương ứng; xem Giới hạn theo gói để biết quyền của workspace.