4

I want to use custom images/icons in my TabView, but when I use a custom image instead of a system image, the image is too large. I've tried to adjust via .frame but it seems to have no effect. I've also tried to resize the photo itself before using it, but it results in poor quality.

Below, you can see my tabItem and the things inside that I've tried. The problem that my image is full size when rendered and I can't get it to shrink down to proper size.
(.frame seems to work fine anywhere else except inside the tabItem)

import SwiftUI

struct ContentView: View {
    @State var selectedMeasurementSystem = UserDefaults.standard.integer(forKey: "selectedMeasurementSystem")

    var body: some View {
        TabView {
            NearEarthObjectsUI(selectedMeasurementSystem: selectedMeasurementSystem)
            .tabItem {
                Image("asteroid").frame(width: 30, height: 30)
                //Image("asteroid").resizable().frame(width: 30, height: 30)
                //Label("NEOs", image: "asteroid")
                //Label("NEOs", image: "asteroid").frame(width: 40, height: 40)
            }
        }.accentColor(.white)
    }
}

Screenshot of tabItem

Nate Thompson
  • 325
  • 2
  • 12
  • 1
    It does not work for tabs, just ask your designer to create a small image or, better, custom SF symbol. – Asperi Apr 24 '22 at 05:04
  • same issue https://stackoverflow.com/questions/58450061/image-not-resizing-in-swiftui-tabview – telami Jan 18 '23 at 14:20

1 Answers1

-1

You may need to call the resizable modifier on the Image.

Image("cat")
  .resizable() 
  .frame(width: 100, height: 100)
azamsharp
  • 19,710
  • 36
  • 144
  • 222