How to show Firebase images in SwiftUI using an ImageSlider or something similar - arrays

Question

I have been trying to do this for some time, but have not been able to achieve my goal. I would like to show images stored at Firebase in an Image Slider or carousel in SwiftUI. I am able to fetch and show a single image (that's a different thing). However, unable to load images from firebase to slider. The first part is to get url of images which I am not getting how to do it.
Update
This loads images but cant auto scroll or auto iterate, images load one after another than stops:
func downImage(){
let imageRef = Storage.storage()
let loc = imageRef.reference().child("Images")
loc.listAll{(result,error) in
if error != nil{
print("Ooops : ", error)
return
}
for item in result!.items{
let count = result?.items.count ?? 5
//provides actual count ie 3
print("number of Images: ", self.count)
print("images url : " , item)
item.getData(maxSize: 15 * 1024 * 1024) { data, error in
if let error = error {
print("\(error)")
}
guard let data = data else { return }
DispatchQueue.main.async {
self.count = count
// self.actualImage.append(self.image)
self.image = UIImage(data: data as Data)!
}}}}}}
In Slider, images are shown but stops after loading third image:
struct ImageSlider: View {
#StateObject var imageList = FireImageModel()
/* private let timer = Timer.publish(every: 3, on: .main, in: .common)
.autoconnect() */
var body: some View {
TabView(){
/* ForEach(imageList.actualImage, id: \.self) { item in
if foreach loop is used with actualImage appending Images no
image is shown or Index out of range error */
Image(uiImage: imageList.image)
.resizable()
.scaledToFill()
}
.tabViewStyle(PageTabViewStyle())
.animation(.easeInOut(duration: 3))
.onAppear(){
imageList.downImage()
}
}
If I apply the timer (commented out) with other settings it keeps updating selected image 0, selected image 1 but image never changes. Need images to auto scroll in this slider.

Answer 1

As I understand your code, you are downloading the string url from Firebase into
#Published var imageURL: [String] = []. This does not download the image data, just the url string.
In your loadImageURL, try this, to store all the url strings into your imageURL array:
DispatchQueue.main.async {
if let linq = link {
self.imageURL.append(linq)
print("url link : ", self.imageURL)
}
In your ImageSlider, use something like this, instead of your Image(item):
AsyncImage(url: URL(string: item))
also, change #ObservedObject var imageList = FireImageModel() to #StateObject var imageList = FireImageModel()
and, do not use !, anywhere in your code, it is a recipe for disaster.
EDIT-1:
Given your new code, try this simple example code, to try to find where your problem is:
struct ImageSlider: View {
#StateObject var imageList = FireImageModel()
var body: some View {
ScrollView {
ForEach(imageList.actualImage, id: \.self) { item in
Image(uiImage: item)
.resizable()
.frame(width: 222, height: 222)
}
.onAppear {
imageList.downImage()
}
}
}
}
Also, do not use ! anywhere in your code.
If that works, try this:
struct ImageSlider: View {
#StateObject var imageList = FireImageModel()
var body: some View {
VStack {
if imageList.actualImage.count > 0 {
TabView {
ForEach(imageList.actualImage, id: \.self) { item in
Image(uiImage: item)
.resizable()
.scaledToFill()
}
}
.tabViewStyle(PageTabViewStyle())
} else {
ProgressView()
}
}
.onAppear {
imageList.downImage()
}
}
}
You may also want to clean your FireImageModel, such as:
class FireImageModel: ObservableObject {
#Published var actualImage: [UIImage] = []
func downImage() {
let imageRef = Storage.storage()
let loc = imageRef.reference().child("Images")
loc.listAll{(result,error) in
if error != nil{
print("Ooops : ", error)
return
}
if let images = result {
print("number of Images: ", images.items.count)
for item in images.items {
print("images url : " , item)
item.getData(maxSize: 15 * 1024 * 1024) { data, error in
if let error = error {
print("\(error)")
}
DispatchQueue.main.async {
if let theData = data, let image = UIImage(data: theData) {
self.actualImage.append(image)
}
}
}
}
}
}
}
}

Answer 2

I was able to display images in slider final prob was auto iteration. ForEach was throwing index out of range error(known prob) when directly using an array having image data so ans by #workingdogUkraine helped to resolve the error by putting check before entering the foreach. Auto iteration is done. Look into updated clean FireImageModel model by WorkingDog, below is the slider struct:
struct ImageSlider: View {
#StateObject var imageList = FireImageModel()
#State private var currentIndex = 0
#State var zoomed = false
private let timer = Timer.publish(every: 3, on: .main, in: .common)
.autoconnect()
var body: some View {
// 2
VStack {
if imageList.actualImage.count > 0 {
GeometryReader{ proxy in
TabView(selection: $currentIndex){
ForEach(imageList.actualImage.indices, id: \.self) {
item in
let sot = imageList.actualImage[item]
Image(uiImage: sot)
.resizable()
.scaledToFill()
.onTapGesture {
self.zoomed.toggle()
}
.scaleEffect(self.zoomed ? 1.73 : 1)
}
.onReceive(timer, perform: {_ in
withAnimation(.spring(response: 1,
dampingFraction: 1, blendDuration: 1)){
currentIndex = currentIndex <
imageList.actualImage.count ? currentIndex + 1 : 0
}
})
}
.tabViewStyle(PageTabViewStyle())
.frame(width: proxy.size.width, height: proxy.size.height/3)
}
}else {
ProgressView()
}
}.background(.ultraThinMaterial)
.onAppear {
imageList.downImage()
}
}}
Images appear with non noticeable animation :), will like to add some cool animation, after every 3 seconds image changes