RecyclerView中为CardView列表项设置图片报错，求原因及正确方法

嘿，我来帮你梳理下RecyclerView的CardView列表项设置图片时最容易踩的坑，以及正确的实现方式——毕竟我也在这个地方栽过好几次😅

常见报错原因分析 #

虽然你没贴具体的报错日志和代码细节，但根据日常开发经验，大概率是这几个问题中的一个：

• 图片资源/路径不匹配：比如你传的本地图片ID写错了、图片文件没放在正确的drawable目录，或者网络图片的URL无效/过期，直接触发Resources.NotFoundException或者IO异常。
• 直接硬加载图片导致的问题：要是你不用图片加载库，直接用ImageView.setImageResource()怼大图，很容易OOM（内存溢出）；加载网络图时如果在主线程发请求，还会触发NetworkOnMainThreadException。
• ViewHolder复用没处理好：RecyclerView的ViewHolder会循环复用，要是你没处理图片加载的取消/重置，就会出现图片错位、闪烁，甚至内存泄漏的情况。
• 数据模型字段类型错误：比如数据模型里存图片的字段，本该用Int类型存本地资源ID，结果存成了String，设置的时候直接抛出类型转换异常。

正确实现方法 #

我直接给你一套规范的实现方案，分本地图片和网络图片两种场景，推荐用Glide（最常用的图片加载库）来处理，它能帮你搞定线程、缓存、复用这些麻烦事。

1. 先写对数据模型类 #

区分本地资源和网络图片，避免字段混淆：

data class CardItem(
    val itemTitle: String,
    // 本地图片用Int存资源ID，可为空
    val localImageResId: Int? = null,
    // 网络图片用String存URL，可为空
    val networkImageUrl: String? = null
)

2. Adapter与ViewHolder的正确实现 #

第一步：添加Glide依赖

在你的app模块的build.gradle（或者build.gradle.kts）里加依赖：

dependencies {
    implementation 'com.github.bumptech.glide:glide:4.16.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.16.0'
}

第二步：Adapter代码实现

class CardAdapter(private val itemList: List<CardItem>) : RecyclerView.Adapter<CardAdapter.CardViewHolder>() {

    inner class CardViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val cardImage: ImageView = itemView.findViewById(R.id.card_image)
        val cardTitle: TextView = itemView.findViewById(R.id.card_title)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CardViewHolder {
        val itemView = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_card_layout, parent, false)
        return CardViewHolder(itemView)
    }

    override fun onBindViewHolder(holder: CardViewHolder, position: Int) {
        val currentItem = itemList[position]
        holder.cardTitle.text = currentItem.itemTitle

        // 优先加载本地图片，没有则加载网络图片，都没有就显示默认图
        currentItem.localImageResId?.let { resId ->
            Glide.with(holder.cardImage.context)
                .load(resId)
                .placeholder(R.drawable.placeholder_loading) // 加载中的占位图
                .error(R.drawable.placeholder_error) // 加载失败的占位图
                .into(holder.cardImage)
        } ?: run {
            currentItem.networkImageUrl?.let { url ->
                Glide.with(holder.cardImage.context)
                    .load(url)
                    .placeholder(R.drawable.placeholder_loading)
                    .error(R.drawable.placeholder_error)
                    .into(holder.cardImage)
            } ?: run {
                holder.cardImage.setImageResource(R.drawable.placeholder_empty)
            }
        }
    }

    override fun getItemCount() = itemList.size
}

3. 必须注意的几个坑点 #

• ViewHolder复用问题：Glide会自动在ViewHolder被复用时取消之前的加载请求，完美避免图片错位；要是你实在不想用图片库，记得在onBindViewHolder里先重置ImageView的状态，比如holder.cardImage.setImageDrawable(null)。
• 主线程限制：绝对不要在主线程直接加载网络图片，Glide会自动切换到子线程处理请求，不用你手动开线程。
• 内存优化：对于本地大图，Glide会自动压缩；你也可以用.override(200, 200)指定加载的尺寸，进一步减少内存占用。
• 网络权限：如果加载网络图片，一定要在AndroidManifest.xml里加网络权限：

<uses-permission android:name="android.permission.INTERNET" />

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