如何解决SDWebImage加载外部图片作为TabBar按钮不显示的问题？

问题排查与修复步骤 #

1. 修正图片渲染模式 #

UITabBarItem的图片默认会被系统以**模板模式（Template Mode）**渲染，仅保留图片的Alpha通道，颜色会被替换为TabBar的tintColor。如果你的图片是带色彩的普通图片，必须将其渲染模式设置为.alwaysOriginal，否则会显示为方块或单色。

2. 适配Retina屏幕的图片缩放 #

原resizeImage方法使用UIGraphicsBeginImageContext，无法适配Retina屏幕的像素密度，导致生成的图片分辨率不足、显示异常。应改用UIGraphicsBeginImageContextWithOptions，传入屏幕缩放因子。

3. 修复ViewController基础语法错误 #

原代码中ViewController未继承UIViewController，viewDidLoad也没有正确的方法声明，这会导致代码无法正常编译运行。

修正后的完整代码 #

import SDWebImage
import UIKit

class ViewController: UIViewController { // 必须继承UIViewController
    let imageView = UIImageView()
    var tabBar = UITabBar()
    var tabBarItem: UITabBarItem?

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 先初始化TabBar并添加到视图
        setupTabBar()
        
        // 加载外部图片
        loadTabBarImage()
    }
    
    private func setupTabBar() {
        tabBar.frame = CGRect(x: 0, y: view.frame.height - 75, width: view.frame.width, height: 50)
        // 先创建占位的TabBarItem，也可以用本地占位图
        tabBarItem = UITabBarItem(title: "Profile", image: UIImage(named: "tablogo"), selectedImage: UIImage(named: "tablogo"))
        tabBar.items = [tabBarItem!]
        view.addSubview(tabBar)
    }
    
    private func loadTabBarImage() {
        imageView.sd_setImage(with: URL(string: "https://randomuser.me/api/portraits/men/32.jpg"), placeholderImage: UIImage(named: "tablogo")) { [weak self] image, error, _, url in
            guard let self = self, let image = image else {
                print("图片加载失败: \(error?.localizedDescription ?? "未知错误")")
                return
            }
            
            // 缩放图片并设置渲染模式
            let resizedImage = self.resizeImage(image: image, newWidth: 25).withRenderingMode(.alwaysOriginal)
            
            // 更新TabBarItem的图片
            self.tabBarItem?.image = resizedImage
            self.tabBarItem?.selectedImage = resizedImage
        }
    }
    
    private func resizeImage(image: UIImage, newWidth: CGFloat) -> UIImage {
        let scale = newWidth / image.size.width
        let newHeight = image.size.height * scale
        let newSize = CGSize(width: newWidth, height: newHeight)
        
        // 使用UIGraphicsBeginImageContextWithOptions适配Retina
        UIGraphicsBeginImageContextWithOptions(newSize, false, UIScreen.main.scale)
        image.draw(in: CGRect(origin: .zero, size: newSize))
        let newImage = UIGraphicsGetImageFromCurrentImageContext() ?? image
        UIGraphicsEndImageContext()
        
        return newImage
    }
}

额外说明 #

• 使用[weak self]避免闭包循环引用，防止内存泄漏。
• 提前初始化TabBar和TabBarItem，避免在图片加载回调中重复创建视图，逻辑更清晰。
• 增加错误处理，避免强制解包导致崩溃。

内容的提问来源于stack exchange，提问作者Sylar