I am trying to display an image from an API I am accessing. I used the Async image that was shown in the network module. However, I am getting stuck on the progress view. The Country Name is displaying fine, so I am getting the info. Below is a link to one of the images and the code I am using.
https://media.api-sports.io/flags/al.svg
ScrollView{
LazyVGrid(columns: columns, spacing: 10) {
ForEach(countries, id: \.name) { country in
VStack{
if let imageURL = country.flag {
AsyncImage(url: URL(string: "\(imageURL)")) { image in
image
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 200, height: 200)
.clipped()
} placeholder: {
ProgressView()
.frame(width: 200, height: 200)
}
}
Text("\(country.name ?? "" )")
.font(.caption.bold())
}
}
}
}