从 alamofire swift 的 tableview 单元格中的 url 加载图像

Posted 2023-02-23

【中文标题】从 alamofire swift 的 tableview 单元格中的 url 加载图像

【英文标题】：load image from url in tableview cell from alamofire swift

【发布时间】：2016-03-07 21:50:32

【问题描述】：

我正在尝试使用 Alomofire 和 swiftyJSON 从 json 加载图像。 Json 是字典：

"name": "image": "https://...",

Alamorefire 和 SwiftyJSON

var imageLoad: String!

Alamofire.request(.GET, url).responseJSON  (response) -> Void in
    if let value = response.result.value 
    let json = JSON(value)

    if let jsonDict = json.dictionary 

        let image = jsonDict["name"]!["image"].stringValue
        print(image) // https://....
        self.imageLoad = image        
    
    self.tableView.reloadData()
    


override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell 
let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! TVCell

// Configure the cell...

cell.imageTableView.image = UIImage(named: imageLoad) // not working "fatal error: unexpectedly found nil while unwrapping an Optional value"

如果有人可以帮忙？如果有其他方式，请随时写。

【参考方案1】：

我分享一个使用 Swift 3 和 AlamofireImage 实现的代码：

import UIKit
import AlamofireImage

class MovieViewCell: UICollectionViewCell 

@IBOutlet weak var titleLabel: UILabel!
@IBOutlet weak var overviewLabel: UILabel!
@IBOutlet weak var posterView: UIImageView!

 func configure(for movie: Movie) 
    titleLabel.text = movie.title
    overviewLabel.text = movie.overview

    let url = URL(string: movie.poster_path!)!
    posterView.af_setImage(withURL: url)
 

 override func prepareForReuse() 
    super.prepareForReuse()

    posterView.af_cancelImageRequest()
    posterView.image = nil
 

此外，您还需要 Cocoapods：

platform :ios, '10.0'

inhibit_all_warnings!
use_frameworks!

target 'MovieApp' do
  pod 'Alamofire', '~> 4.5'
  pod 'AlamofireImage', '~> 3.3'
end

官方文档AlamofireImage和an ImageCell.swift example

【参考方案2】：

如果您使用Alamofire，请尝试AlamofireImage。但是直接在 uiimageview 上使用af_ 快​​捷方式。如果您使用可以回收单元格的表格视图，您将自动获得缓存、占位符图像，并且您可以取消未完成的请求。

通过指定占位符图像，图像视图使用占位符图像，直到远程图像被下载。

let imageView = UIImageView(frame: frame)
let url = URL(string: "https://httpbin.org/image/png")!
let placeholderImage = UIImage(named: "placeholder")!

imageView.af_setImage(withURL: url, placeholderImage: placeholderImage)

https://github.com/Alamofire/AlamofireImage

【讨论】：

我做了你上面提到的同样的事情。但我正在使用可重复使用的电池。图像也会重复加载到单元格上。你能帮帮我吗？

可重用单元格很棘手，因为您可能会陷入竞争状态（如果您开始下载然后将单元格与另一个图像重用等）解决此问题的方法是下载图像并缓存它当你得到 URL。您可以使用 DispatchGroup() 延迟获取 URL 的 URL 调用的完成回调，直到下载图像。当然，这可能不适用于所有场景/如果图像真的很大。此时您可能应该尝试一些延迟加载图像，但您还必须在队列中跟踪下载以避免竞争条件...

【参考方案3】：

从 alamofire swift3 的 tableview 单元格中的 url 加载图像：-

//你需要安装 pod 'AlamofireImage', '~> 3.0' pod

    import Alamofire
    import AlamofireImage

// put into cellForRowAt

    Alamofire.request(self.profileImgArr[indexPath.row]).responseData  (response) in
                    if response.error == nil 
                             print(response.result)

                             // Show the downloaded image:
                             if let data = response.data 
                                     cell.profileImg.image = UIImage(data: data)
                                                 
                         
                 

【参考方案4】：

我建议使用不同的库来加载图像。我们在项目中总是这样做。

有一个简单而智能的库，可以处理从缓存到占位符图像的几乎所有事情。

它的名字叫翠鸟 https://github.com/onevcat/Kingfisher

您可以使用 JSON 中的 URL 直接在 ImageView 上使用它 示例：

let url = URL(string: "url_of_your_image")
imageView.kf.setImage(with: url)

这是最基本的异步图片加载方式，

看看你自己:)

【讨论】：

我建议将上面的两行示例集成到问题中提供的代码示例中。这将使答案更有帮助。

【参考方案5】：

如果您已经在使用Alamofire，您可以尝试AlamofireImage，它是Alamofire 的图像组件库。

然后，获取图像是这样完成的：

import AlamofireImage

Alamofire.request(.GET, "https://httpbin.org/image/png")
         .responseImage  response in

             if let image = response.result.value 
                 print("image downloaded: \(image)")
             
         

【参考方案6】：

正如Bear with me所说你可以使用AlamofireImage，

https://github.com/Alamofire/AlamofireImage

我为 Swift 3 制作了这个，希望对您有所帮助：

在实现 tableViewDataSource 的控制器中

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! Cell
    NetworkService.shared.requestImage(path: path, completionHandler: image in
            cell.photo?.image = image
        )
    
    return cell

在我的NetworkService中（我用shared实现singleton，就像getInstance一样）我实现了调用AlamofireImage的requestImage函数：

func requestImage(path: String, completionHandler: @escaping (Image) -> Void)
    Alamofire.request("\(path)").responseImage(imageScale: 1.5, inflateResponseImage: false, completionHandler: response in
        guard let image = response.result.value else
            print(response.result)
            return
        
        DispatchQueue.main.async 
            completionHandler(image)
        
    )

如您所见，我使用主队列的 GCD 来管理 completionHandler，以确保它是处理视图修改的主队列。

【讨论】：

这是否有可能造成竞争条件？如果单元格正在加载图像，被回收，并且第二个图像的加载速度比第一个更快....