如何添加来自互联网的图片作为我的应用程序的背景？

Question

我想要从互联网上下载一张图片作为我正在处理的主页特定部分的背景。

这是我的主页代码：

struct LaunchPage: View {
    var body: some View {
        NavigationStack{
            GeometryReader {geo in
                VStack{
                    ScrollView{
                    ZStack {
                        Color.clear
                            .background(.ultraThinMaterial)
                        NavigationLink("Groups", destination: GroupPage())
                            .font(.title.weight(.bold))
                            .frame(maxWidth:.infinity, alignment: .leading)
                            .padding(.leading, 20)
                            .foregroundColor(.black)
                            .frame(height: 70)
                            .frame(maxHeight: .infinity, alignment: .top)
                       
                        NavigationLink("Calendar", destination: CalendarPage())
                            .font(.title.weight(.bold))
                            .frame(maxWidth:.infinity, alignment: .leading)
                            .padding(.leading, 140)
                            .foregroundColor(.black)
                            .frame(height: 70)
                            .frame(maxHeight: .infinity, alignment: .top)
                        
                        NavigationLink("Join", destination: JoinPage())
                            .font(.title.weight(.bold))
                            .frame(maxWidth:.infinity, alignment: .leading)
                            .padding(.leading, 300)
                            .foregroundColor(.black)
                            .frame(height: 70)
                            .frame(maxHeight: .infinity, alignment: .top)
                        
                    }
                    
                    VStack {
                            Spacer()
                            Image("carpooly-high-resolution-logo")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(width: geo.size.width * 2.0, height: geo.size.width * 1.5)
                                .offset(y:-88)
                                .offset(x:-200)
                                .padding(.top, 100)
                    }
                    }.background(backgroundGradient)
                }
            }
            .navigationBarHidden(true)
        }
    }
}

我已经为导航栏区域设置了背景，但我想要为屏幕中间设置一个背景。这是启动页面目前的样子：

带有 Carpooly 徽标的空白区域是我想要的背景位置。

我还没有真正尝试过任何东西，我在网上搜索过但找不到任何东西。预先感谢您的帮助！

Answer 1

要将图像作为徽标图像的背景，您可以尝试这种方法， 使用简单的

ZStack

和您从互联网上获得的图像。

示例代码：

 VStack {
     Spacer()
     ZStack {  // <--- here
         
         Image("internet_image")  // <--- here image from internet
             .resizable()
             .aspectRatio(contentMode: .fit)
             .foregroundStyle(.red)
             //...
         
         Image("carpooly-high-resolution-logo")
             .resizable()
             .aspectRatio(contentMode: .fit)
              //...

     } // end ZStack
 } // end VStack