Background blur effect based on image

How would you implement this background blur effect based on image?

Something like in iBooks app:

I was thinking about aspectFilled image in the background of VisualEffectView (since I'm supporting iOS 14) or getting 2 average colors of the image and making it gradient + blurred.

You can just use the same image in the background and apply a heavy blur effect to it.

• By default, the blur is semi-transparent, so the system background starts to show through from behind. The larger the blur radius, the more you see of the system background. When the blur radius is very large, you begin to see stripes at the sides of the blurred image. So it works better if you use an opaque blur instead.

• To give more contrast to any text you might want to show, you can apply a semi-transparent overlay in the background color.

private func displayBook(imageName: String, author: String) -> some View {
    HStack {
        Image(imageName)
            .resizable()
            .scaledToFit()
        Text(author)
    }
    .padding()
    .frame(width: 150, height: 100, alignment: .leading)
    .background(
        Image(imageName)
            .resizable()
            .scaledToFill()
            .blur(radius: 30, opaque: true)
            .overlay(.background.opacity(0.4))
    )
    .clipShape(RoundedRectangle(cornerRadius: 10))
}

var body: some View {
    HStack {
        displayBook(imageName: "Goggins", author: "David Goggins")
        displayBook(imageName: "Thiel", author: "Peter Thiel")
    }
}