วิธีโหลดและแสดงรูปภาพใน iOS App ด้วย Swift

โหลดและแสดงรูปภาพใน iOS ใช้ UIImageView + UIImage

1. รูปภาพใน Asset Catalog (Local)

1. ลากไฟล์รูป → Assets.xcassets → สร้าง New Image Set
2. ใส่รูป 1x, 2x, 3x ให้ครบ
3. ตั้งชื่อ เช่น "profile_image"

// โหลดจาก Asset
let image = UIImage(named: "profile_image")
imageView.image = image

2. โหลดจาก Bundle (File ใน Project)

if let url = Bundle.main.url(forResource: "image", withExtension: "png"),
   let data = try? Data(contentsOf: url),
   let image = UIImage(data: data) {
    imageView.image = image
}

3. โหลดจาก URL (Network) - Async

func loadImage(from urlString: String, completion: @escaping (UIImage?) -> Void) {
    guard let url = URL(string: urlString) else { completion(nil); return }
    
    URLSession.shared.dataTask(with: url) { data, response, error in
        guard let data = data, error == nil,
              let image = UIImage(data: data) else {
            DispatchQueue.main.async { completion(nil) }
            return
        }
        DispatchQueue.main.async { completion(image) }
    }.resume()
}

// ใช้งาน
loadImage(from: "https://example.com/image.jpg") { image in
    self.imageView.image = image
}

4. โหลดจาก Document Directory

let documentsPath = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first!
let fileURL = documentsPath.appendingPathComponent("saved_image.png")

if let image = UIImage(contentsOfFile: fileURL.path) {
    imageView.image = image
}

UIImageView Settings

imageView.contentMode = .scaleAspectFit   // Fit ทั้งรูป (อาจมี Letterbox)
imageView.contentMode = .scaleAspectFill  // Fill พื้นที่ (อาจ Crop) - ต้อง clipsToBounds=true
imageView.contentMode = .scaleToFill      // Stretch เต็ม (บิดเบี้ยว)
imageView.clipsToBounds = true            // ตัดส่วนเกิน

Best Practice: ใช้ Library

สำหรับ Production ควรใช้ Library จัดการ Cache, Loading, Error:

• Kingfisher - imageView.kf.setImage(with: url)
• SDWebImage - imageView.sd_setImage(with: url)
• Nuke - Nuke.loadImage(with: url, into: imageView)

ตัวอย่าง Kingfisher

import Kingfisher

let url = URL(string: "https://example.com/image.jpg")
imageView.kf.setImage(
    with: url,
    placeholder: UIImage(named: "placeholder"),
    options: [
        .transition(.fade(0.3)),
        .cacheOriginalImage,
        .processor(DownsamplingImageProcessor(size: imageView.bounds.size))
    ]
) { result in
    switch result {
    case .success(let value): print("Loaded: \(value.source.url?.absoluteString ?? "")")
    case .failure(let error): print("Error: \(error)")
    }
}