How to call ArrayList<String> in Adapter?

i have a problem here. i want to call an array string in my adapter, but the image not showing at all. and its say class com.bumptech.glide.load.engine.GlideException: Failed to load resource, com.bumptech.glide.Registry$NoModelLoaderAvailableException(Failed to find any ModelLoaders registered for model class: class java.util.ArrayList). Can someone help me?

this is the Response

data class ProductResponse (

@SerializedName("status"     ) var status     : String?           = null,
@SerializedName("produk"     ) var produk     : ArrayList<Produk> = arrayListOf(),
@SerializedName("page"       ) var page       : Int?              = null,
@SerializedName("per_page"   ) var perPage    : Int?              = null,
@SerializedName("totalRows"  ) var totalRows  : Int?              = null,
@SerializedName("totalPages" ) var totalPages : Int?              = null

) {
data class Produk (

    @SerializedName("id"          ) var id          : Int?              = null,
    @SerializedName("name"        ) var name        : String?           = null,
    @SerializedName("description" ) var description : String?           = null,
    @SerializedName("base_price"  ) var basePrice   : Int?              = null,
    @SerializedName("image_url"   ) var imageUrl    : ArrayList<String> = arrayListOf(),
    @SerializedName("location"    ) var location    : String?           = null,
    @SerializedName("user_id"     ) var userId      : Int?              = null,
    @SerializedName("createdAt"   ) var createdAt   : String?           = null,
    @SerializedName("updatedAt"   ) var updatedAt   : String?           = null,
    @SerializedName("category"    ) var category    : Category?         = Category()

) {
    data class Category (

        @SerializedName("id"   ) var id   : Int?    = null,
        @SerializedName("name" ) var name : String? = null

    )
  }
}

this is the adapter

class ProductAdapter(private val onClick: OnClickListener): RecyclerView.Adapter<ProductAdapter.ViewHolder>() {

private val diffCallBack = object: DiffUtil.ItemCallback<ProductResponse.Produk>(){
    override fun areItemsTheSame(oldItem: ProductResponse.Produk, newItem: ProductResponse.Produk): Boolean {
        return oldItem.id == newItem.id
    }
    override fun areContentsTheSame(oldItem: ProductResponse.Produk, newItem: ProductResponse.Produk): Boolean {
        return oldItem.name == newItem.name
    }
}

private val differ = AsyncListDiffer(this,diffCallBack)
fun submitData(value: List<ProductResponse.Produk>?) = differ.submitList(value)

interface OnClickListener {
    fun onClickItem (data: ProductResponse.Produk)
}

inner class ViewHolder(private val binding: ListProductHomeBinding): RecyclerView.ViewHolder(binding.root){
    @SuppressLint("SetTextI18n")
    var listCategory = ""
    fun bind (data: ProductResponse.Produk){
        Glide.with(binding.root)
            .load(data.imageUrl)
            .into(binding.ivProductImg)
        binding.tvProductName.text = data.name
        binding.tvProductCategory.text = data.category!!.name.toString()
        binding.tvProductPrice.text = currency(data.basePrice!!)
        binding.root.setOnClickListener {
            onClick.onClickItem(data)
        }
    }
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ProductAdapter.ViewHolder {
    val inflate = LayoutInflater.from(parent.context)
    return ViewHolder(ListProductHomeBinding.inflate(inflate,parent,false))
}

override fun onBindViewHolder(holder: ProductAdapter.ViewHolder, position: Int) {
    val data = differ.currentList[position]
    data.let {
        holder.bind(data)
    }
}

override fun getItemCount(): Int {
    return differ.currentList.size
}
}

>Solution :

Because your data.imageUrl is an ArrayList<String>.

Try loading only the first element, since Glide can only load one image.

Glide.with(binding.root)
 .load(data.imageUrl.first())
 .into(binding.ivProductImg)