# Dùng ảnh trong template

Chọn ảnh từ Assets, chèn vào HTML hoặc đặt làm nền cho page, Header và Footer.

Ả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](/docs/vi/assets/manage/) 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.

<figure class="doc-sim data-assets-illustration" aria-label="Prop kiểu Asset → Select image → chọn ảnh trong project">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Props</strong></div><div class="ds-node"><strong>logo</strong><span class="ds-type">Asset <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div><div class="ds-pad"><span class="sim-control sim-focus">▧ Select image</span></div><div class="ds-asset-grid"><div class="ds-asset sim-focus"><div class="ds-thumb"><span>T</span></div><strong>logo.png</strong><small>PNG</small></div><div class="ds-asset"><div class="ds-thumb"><span>T</span></div><strong>cover.jpg</strong><small>JPG</small></div></div></div></div>
<figcaption>Prop kiểu Asset → Select image → chọn ảnh trong project</figcaption>
</figure>

## 2. Hiển thị ảnh trong HTML

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

```handlebars
<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:

```css
.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.

<figure class="doc-sim data-assets-illustration" aria-label="HTML → props.logo → image">
<div class="sim-stage"><div class="ds-code sim-focus"><code>&lt;img src="{{ props.logo }}"</code><code>     alt="Logo" class="logo" /&gt;</code></div><div class="ds-image-preview"><div class="ds-logo">Tembuilder</div><small>props.logo</small></div></div>
<figcaption>HTML → props.logo → image</figcaption>
</figure>

## 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](/docs/vi/editor/header-footer/) khi cần đặt ảnh vào vùng đầu hoặc cuối trang.

<figure class="doc-sim data-assets-illustration" aria-label="Background → Image → chọn cách phủ và vị trí ảnh">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Page background</strong></div><div class="ds-setting"><span>Image</span><span class="sim-control sim-focus">Select image</span></div><div class="ds-rows"><div><span>Size</span><small>Cover</small></div><div><span>Position</span><small>Center</small></div><div><span>Repeat</span><small>No repeat</small></div></div></div><div class="ds-image-options"><span>contain</span><span>cover</span></div></div>
<figcaption>Background → Image → chọn cách phủ và vị trí ảnh</figcaption>
</figure>

## 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.

```html
<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](/docs/vi/plans/limits/) để biết quyền của workspace.

<figure class="doc-sim data-assets-illustration" aria-label="Dùng URL trỏ trực tiếp tới file ảnh công khai">
<div class="sim-stage"><div class="ds-url-box sim-focus"><small>HTTPS image URL</small><code>https://example.com/images/banner.png</code></div><div class="ds-source-path"><span>URL</span><span>→</span><span>Image file</span><span>→</span><span>PDF</span></div></div>
<figcaption>Dùng URL trỏ trực tiếp tới file ảnh công khai</figcaption>
</figure>