美文网首页SwiftUI
SwitUI-实现URL图片显示

SwitUI-实现URL图片显示

作者: Augs | 来源:发表于2019-12-07 14:21 被阅读0次

实现方法一(纯使用SwiftUI)

import SwiftUI

struct WebImage: View {
    @ObservedObject var imageLoader: ImageLoader
    @State var image: UIImage = UIImage()

    init(withURL url: String) {
        imageLoader = ImageLoader(urlString:url)
    }

    var body: some View {
        VStack {
            //在这里,我们可以直接检查imageLoader的data属性。如果为零,则使用空的UIImage,否则可以使用数据创建UIImage。设置完数据后,@ Published将通知ImageView,它将使用imageLoader中数据的更新版本重新加载Image。
            Image(uiImage: imageLoader.data != nil ? UIImage(data:imageLoader.data!)! : UIImage())
                .resizable()
                .aspectRatio(contentMode: .fit)
        }
    }
}

class ImageLoader: ObservableObject {
    //通过使用@Published属性包装器,我们不需要像PassthroughSubject那样创建自己的发布者并通知我们的订阅者。属性包装器会处理它。
    @Published var data:Data?
    
    init(urlString: String) {
        guard let url = URL(string: urlString) else { return }
        let task = URLSession.shared.dataTask(with: url) { (data, response, error) in
            guard let data = data else { return }
            DispatchQueue.main.async { self.data = data }
        }
        task.resume()
    }
}

#if DEBUG
struct WebImage_Previews: PreviewProvider {
    static var previews: some View {
        WebImage(withURL: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1158873959,778733211&fm=26&gp=0.jpg")
    }
}
#endif

实现方法二(纯使用SwiftUI和Combine)

import SwiftUI
import Combine

struct WebImage: View {
    @ObservedObject var imageLoader: ImageLoader
    @State var image: UIImage = UIImage()

    init(withURL url: String) {
        imageLoader = ImageLoader(urlString:url)
    }

    var body: some View {
        VStack {
            Image(uiImage: image)
                .resizable()
                .aspectRatio(contentMode: .fit)
        }.onReceive(imageLoader.didChange) { data in
            self.image = UIImage(data: data) ?? UIImage()
        }
    }
}

class ImageLoader: ObservableObject {
    var didChange = PassthroughSubject<Data, Never>()
    var data = Data() {
        didSet {
            didChange.send(data)
        }
    }
    
    init(urlString: String) {
        guard let url = URL(string: urlString) else { return }
        let task = URLSession.shared.dataTask(with: url) { (data, response, error) in
            guard let data = data else { return }
            DispatchQueue.main.async { self.data = data }
        }
        task.resume()
    }
}

#if DEBUG
struct WebImage_Previews: PreviewProvider {
    static var previews: some View {
        WebImage(withURL: "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1158873959,778733211&fm=26&gp=0.jpg")
    }
}
#endif

最终效果:


截屏2019-12-0714.19.47.png

相关文章

  • SwitUI-实现URL图片显示

    实现方法一(纯使用SwiftUI) 实现方法二(纯使用SwiftUI和Combine) 最终效果:

  • web前端实现上传土图片并且预览效果

    1 - web实现图片上传并且预览 这里利用了createObjectURL来获取图片的URL地址进行预览显示 效...

  • 流量统计显示功能

    请求URL,返回URL,请求流量列表显示,实现可切换显示功能浮动窗口显示,创建系统级窗口用于显示最近的请求url系...

  • Image

    Image.network(url):从网络加载显示图片、这里需要传入图片的url, Image.file(fil...

  • SDWebImage 缓存原理

    根据URL 去imageCache 获取图片 if (存在) { 显示imageCache里的图片 return ...

  • 镜像图片

    简介 本文介绍如何镜像图片以及100%拉伸显示图片背景 代码 100%拉伸平铺显示:background: url...

  • Android 实现图片标题轮播

    先上一下效果图,这里的标题先用图片的url显示本文写的效果是作用于Android的广告轮播控件,实现本地或网络图片...

  • 问题记录

    输入数据后传到当前界面,如果更新为新的数据,提交记录,添加图片,显示,上传文件获得图片url加入数组,提交url数...

  • SDWebImage相关

    项目中出现 url 链接中有中文时,图片不显示解决办法就是 对 URL 链接中的 value 进行 URL 编码 ...

  • 图片下载

    NSOperation下载图片 首先就是根据图片的url去images中取图片,如果存在直接就将图片显示到cell...

网友评论

    本文标题:SwitUI-实现URL图片显示

    本文链接:https://www.haomeiwen.com/subject/ubrugctx.html