Trong uni-app, việc thiết lập ảnh nền (background image) thông qua CSS có cách thức tương tự như phát triển web truyền thống, tuy nhiên bạn cần lưu ý các quy tắc cụ thể để đảm bảo tính tương thích trên đa nền tảng:

• Hỗ trợ định dạng hình ảnh Base64.
• Hỗ trợ đường dẫn hình ảnh từ URL (internet).
• Lưu ý về Mini Program: Hầu hết các nền tảng mini app không hỗ trợ sử dụng tệp tin cục bộ (local file) trực tiếp trong CSS. Để hiển thị, bạn bắt buộc phải chuyển đổi hình ảnh sang định dạng Base64.

Xử lý tệp tin hình ảnh cục bộ

Để tối ưu hóa trải nghiệm, uni-app áp dụng các quy tắc tự động hóa sau:

• Nếu dung lượng ảnh nhỏ hơn 40kb, trình biên dịch sẽ tự động chuyển đổi chúng sang định dạng Base64 đối với các nền tảng không hỗ trợ tệp tin cục bộ.
• Đối với ảnh có kích thước từ 40kb trở lên, hệ thống không khuyến khích sử dụng trực tiếp do vấn đề hiệu suất. Bạn nên chuyển đổi thủ công sang Base64 hoặc tải lên máy chủ và truy cập thông qua đường dẫn URL.
• Khi tham chiếu các tệp tin cục bộ, nên sử dụng đường dẫn tuyệt đối bắt đầu bằng ~@/.

.container-bg {
    background-image: url('~@/static/assets/banner.png');
}

Một số lưu ý quan trọng

• Hạn chế của WeChat Mini Program: Trình duyệt trên thiết bị thật không hỗ trợ các đường dẫn tương đối (dù công cụ phát triển có thể hiển thị được, bạn vẫn cần tránh sử dụng để đảm bảo ổn định).
• Để chuyển đổi hình ảnh sang chuỗi Base64 nhanh chóng, bạn có thể sử dụng các dịch vụ chuyển đổi trực tuyến.

Ví dụ triển khai trong Component

<template>
    <view class="display-area">
        <view class="custom-bg-layer"></view>
        <view class="remote-bg-layer"></view>
    </view>
</template>

<style>
    /* Sử dụng tệp nội bộ với đường dẫn tuyệt đối */
    .custom-bg-layer {
        width: 300rpx;
        height: 300rpx;
        background: url("~@/static/images/sample.jpg") no-repeat center;
        background-size: cover;
    }

    /* Sử dụng hình ảnh từ URL */
    .remote-bg-layer {
        width: 300rpx;
        height: 300rpx;
        background: url("https://example.com/remote-image.jpg") no-repeat center;
        background-size: cover;
    }
</style>