https://github.com/chris-swift-dev/RemoteImage
Swift package for a SwiftUI remote image view
https://github.com/chris-swift-dev/RemoteImage
catalyst icloud icloud-photos ios mac-os macos phasset remoteimage remoteimage-swiftui swift swift-package swift-ui swiftui swiftui-components swiftui-example
Last synced: about 2 months ago
JSON representation
Swift package for a SwiftUI remote image view
- Host: GitHub
- URL: https://github.com/chris-swift-dev/RemoteImage
- Owner: chris-swift-dev
- License: mit
- Created: 2019-08-14T21:50:55.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-04-11T19:04:51.000Z (about 3 years ago)
- Last Synced: 2025-03-24T14:02:28.948Z (about 2 months ago)
- Topics: catalyst, icloud, icloud-photos, ios, mac-os, macos, phasset, remoteimage, remoteimage-swiftui, swift, swift-package, swift-ui, swiftui, swiftui-components, swiftui-example
- Language: Swift
- Size: 333 KB
- Stars: 81
- Watchers: 2
- Forks: 15
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# RemoteImage
[](https://developer.apple.com/swift)
[](https://www.apple.com)
[](https://github.com/crelies/RemoteImage)
[](https://github.com/crelies/RemoteImage/actions/workflows/build.yml)
[](https://codecov.io/gh/crelies/RemoteImage)
[](https://en.wikipedia.org/wiki/MIT_License)
This Swift package provides a wrapper view around the existing **SwiftUI** `Image view` which adds support for showing and caching remote images.
In addition you can specify a loading and error view.
You can display images from a specific **URL** or from the **iCloud** (through a `PHAsset` identifier).
## 💡 Installation
Add this Swift package in Xcode using its Github repository url. (File > Swift Packages > Add Package Dependency...)
## 🧠How to use
Just pass a remote image url or the local identifier of a `PHAsset` and `ViewBuilder`s for the error, image and loading state to the initializer. That's it 🎉
Clear the image cache through `RemoteImageService.cache.removeAllObjects()`.
## 📖 Examples
The following code truly highlights the **simplicity** of this view:
**URL example:**
```swift
let url = URL(string: "https://images.unsplash.com/photo-1524419986249-348e8fa6ad4a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80")!
RemoteImage(type: .url(url), errorView: { error in
Text(error.localizedDescription)
}, imageView: { image in
image
.resizable()
.aspectRatio(contentMode: .fit)
}, loadingView: {
Text("Loading ...")
})
```
**PHAsset example:**
```swift
RemoteImage(type: .phAsset(localIdentifier: "541D4013-D51C-463C-AD85-0A1E4EA838FD"), errorView: { error in
Text(error.localizedDescription)
}, imageView: { image in
image
.resizable()
.aspectRatio(contentMode: .fit)
}, loadingView: {
Text("Loading ...")
})
```
## Custom `RemoteImageURLDataPublisher`
Under the hood the `URLSession.shared` is used by default as the `RemoteImageURLDataPublisher` to fetch the image at the specified URL.
You can specify a custom publisher through the`remoteImageURLDataPublisher` parameter.
As an example that's how you could add support for low data mode to the `RemoteImage` view.
```swift
let url = URL(string: "https://images.unsplash.com/photo-1524419986249-348e8fa6ad4a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80")!
RemoteImage(type: .url(url), remoteImageURLDataPublisher: {
let configuration = URLSessionConfiguration.default
// Enable low data mode support
configuration.allowsConstrainedNetworkAccess = false
return URLSession(configuration: configuration)
}(), errorView: { error in
Text(error.localizedDescription)
}, imageView: { image in
image
.resizable()
.aspectRatio(contentMode: .fit)
}, loadingView: {
Text("Loading ...")
})
```
## Custom `RemoteImageService`
If you want complete control over the service responsible for managing the state of the view and for fetching the image you could pass an object conforming to the `RemoteImageService` protocol to the related initializer:
```swift
final class CustomService: RemoteImageService { ... }
let url = URL(string: "https://images.unsplash.com/photo-1524419986249-348e8fa6ad4a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80")!
RemoteImage(type: .url(url), service: CustomService(), errorView: { error in
Text(error.localizedDescription)
}, imageView: { image in
image
.resizable()
.aspectRatio(contentMode: .fit)
}, loadingView: {
Text("Loading ...")
})
```
In addition to that you could use the new `@StateObject` property wrapper introcuded in Swift by creating an instance of the default built-in `RemoteImageService` and using the above initializer:
```swift
@StateObject var service = DefaultRemoteImageServiceFactory.makeDefaultRemoteImageService()
// or
@StateObject var service = DefaultRemoteImageServiceFactory.makeDefaultRemoteImageService(remoteImageURLDataPublisher: yourRemoteImageURLDataPublisher)
let url = URL(string: "https://images.unsplash.com/photo-1524419986249-348e8fa6ad4a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80")!
RemoteImage(type: .url(url), service: service, errorView: { error in
Text(error.localizedDescription)
}, imageView: { image in
image
.resizable()
.aspectRatio(contentMode: .fit)
}, loadingView: {
Text("Loading ...")
})
```
## Custom cache
The `RemoteImageService` uses a default cache. To use a custom one just conform to the protocol `RemoteImageCache` and set it on the type `RemoteImageService`.
```swift
RemoteImageService.cache = yourCache
```
## Custom cache key
The default cache uses the associated value of the related `RemoteImageType` as the key. You can customize this by setting a cache key provider through
```swift
RemoteImageService.cacheKeyProvider = { remoteImageType -> AnyObject in
// return a key here
}
```
## Migration from 0.1.0 -> 1.0.0
The `url parameter` was refactored to a `type parameter` which makes it easy to fetch images at a URL or from the iCloud.
Change
```swift
# Version 0.1.0
let url = URL(string: "https://images.unsplash.com/photo-1524419986249-348e8fa6ad4a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80")!
RemoteImage(url: url, errorView: { error in
Text(error.localizedDescription)
}, imageView: { image in
image
.resizable()
.aspectRatio(contentMode: .fit)
}, loadingView: {
Text("Loading ...")
})
```
to
```swift
# Version 1.0.0
let url = URL(string: "https://images.unsplash.com/photo-1524419986249-348e8fa6ad4a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80")!
RemoteImage(type: .url(url), errorView: { error in
Text(error.localizedDescription)
}, imageView: { image in
image
.resizable()
.aspectRatio(contentMode: .fit)
}, loadingView: {
Text("Loading ...")
})
```