Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> iOS

Cách tải và hiển thị ảnh trên iOS App bằng Swift

Để tải và hiển thị ảnh trong iOS app, dùng UIImageView với ảnh từ Asset Catalog (bundle) hoặc tải từ mạng (URL).

1. Ảnh từ Asset Catalog (Local Bundle)

  1. Kéo ảnh vào Assets.xcassets (tự tạo AppIcon set hoặc New Image Set).
  2. Đặt tên, ví dụ: background.png.

Code hiển thị


func addImage(imageName: String) {
    let imageView = UIImageView()
    imageView.frame = view.bounds
    imageView.contentMode = .scaleAspectFit  // Giữ tỷ lệ, fit trong khung
    imageView.image = UIImage(named: imageName)
    view.addSubview(imageView)
}

override func viewDidLoad() {
    super.viewDidLoad()
    addImage(imageName: "background")  // Tên trong Assets
}

Kết quả

Cách tải và hiển thị ảnh trên iOS App bằng Swift

2. Ảnh từ URL (Mạng) - Cần Async Loading

Không dùng Data(contentsOf:) trên main thread (block UI). Dùng URLSession hoặc thư viện.

Cách native (URLSession)


func loadImage(from urlString: String, into imageView: UIImageView) {
    guard let url = URL(string: urlString) else { return }
    
    URLSession.shared.dataTask(with: url) { data, response, error in
        guard let data = data, error == nil, let image = UIImage(data: data) else { return }
        DispatchQueue.main.async {
            imageView.image = image
        }
    }.resume()
}

Cách hiện đại: Thư viện (Kingfisher/SDWebImage/Nuke)


// Kingfisher (Swift)
import Kingfisher
imageView.kf.setImage(with: URL(string: "https://example.com/image.jpg"))

// SDWebImage (ObjC/Swift)
imageView.sd_setImage(with: URL(string: "https://example.com/image.jpg"))

// Nuke (Swift)
Nuke.loadImage(with: URL(string: "https://example.com/image.jpg"), into: imageView)

Lưu ý quan trọng

  • App Transport Security (ATS): Info.plist cần NSAppTransportSecurity cho HTTP hoặc domain exception.
  • Caching: Thư viện tự handle memory/disk cache. Native cần tự implement NSCache.
  • Placeholder: Hiển thị ảnh mặc định khi đang tải.
  • Cell reuse: Hủy request cũ khi cell reused (Kingfisher/SDWebImage tự handle).
  • Content Mode: .scaleAspectFit (fit toàn ảnh), .scaleAspectFill (lấp đầy, crop), .scaleToFill (méo).