How To Fix Image Not Showing Error For Swift Button

When you use UIKit.UIButton class’s setImage method to set swift button’s icon image, if the image is not icon format, it will display a purely blue color rectangle instead of the image. You can fix this error by converting the image to an icon format image. But you can also fix this error by setting the UIImage object’s rendering mode to draw the original image always. This article will tell you how to do it.

1. UIImage Rendering Mode.

1. Swift UIImage class has a method withRenderingMode, when you call this method, you need to pass a parameter to specify the image rendering mode. Then it will return a new UIImage object with the specified rendering mode.
2. UIImage.RenderingMode class provide all the image rendering mode values, they are as follows.
3. alwaysOriginal: This rendering mode will always draw the original image.
4. alwaysTemplate: Treat the image as a template, and the image color information will be ignored.
5. automatic: Use the image context default rendering mode.
6. To fix this error is very easy, you just need to set the UIImage object’s rendering mode to RenderingMode.alwaysOriginal.

   // First create a UIImage object with added image file.
   var iconImage:UIImage = UIImage(named: "color apple.png")!
   ......
   // Change UIImage rendering mode to alwaysOriginal, then it will always draw the original image on the button. 
   iconImage = iconImage.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
   

2. Draw Original Button Image Example.

1. First, let us look at the example picture below, you will find it show the original image in the button.
   
2. Below is the ViewController.swift file source code. This example only needs to edit this file.

   //
   //  ViewController.swift
   //  SwiftReserveImageColorExample
   //
   //  Copyright © 2019 dev2qa.com. All rights reserved.
   //
   
   import UIKit
   
   class ViewController: UIViewController {
   
       override func viewDidLoad() {
           super.viewDidLoad()
           
           // Get screen width and height.
           let screenWidth = UIScreen.main.bounds.width
           //let screenHeight = UIScreen.main.bounds.height
           
           // Create a UIImage object use added image file.
           var iconImage:UIImage = UIImage(named: "color apple.png")!
           
           // Get image height value.
           let iconImageHeight = iconImage.size.height
           
           // Change the image rendering mode to always draw original image. Then it will draw the original image for the button to replace the pure blue rectangle.
           iconImage = iconImage.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
           
           // Create a system default type button object.
           let btn:UIButton = UIButton(type: UIButton.ButtonType.system)
           
           // Set above UIImage object as the button normal state image.
           btn.setImage(iconImage, for: UIControl.State.normal)
           
           // Set button frame size, the button's width is screen_width - 10, the button's height is image_height - 10.
           btn.frame = CGRect(x: 10,y: 10,width: screenWidth - 10, height: iconImageHeight + 10)
           
           // Set button background color to green.
           btn.backgroundColor = UIColor.green
           
           // Set button normal state title text.
           btn.setTitle("This is a button", for: UIControl.State.normal)
           
           // Set button border color.
           btn.layer.borderColor = UIColor.blue.cgColor
           
           // Set button border width.
           btn.layer.borderWidth = 3
           
           // Set button border rounded corner radius.
           btn.layer.cornerRadius = 15
           
           // Set button center point position. The button's center point is screen center point.
           btn.center = CGPoint(x: UIScreen.main.bounds.width/2, y: UIScreen.main.bounds.height/2)
           
           // Add the button to main screen.
           self.view.addSubview(btn)   
       }
   }
   

Reference

1. How To Set An Image As Swift Button Icon, Background Color And Background Image Example