Images are not displaying in RecyclerView

Question

I have implemented a RecyclerView with backend node.js mysql and I have already set a folder for images. In android, the RecyclerView works fine but when I have decided to work with dynamic images from url, they are not displating in RecyclerView, I am reading from a JSON.

{
  "location_id": 3,
  "datelocation": "15/10/2020 15:11",
  "adresselocation": "Klibia",
  "bike_id": 3,
  "user_id": 10,
  "model": "Skygrey",
  "type": "RTT",
  "price": "55",
  "image": "http://localhost:3000/bike2.png"
}

I had set my adapter like this:

public class BikesAdapter extends RecyclerView.Adapter<BikesAdapter.BikesViewHolder> {

    private final ArrayList<Bike> bikes;
    private Context mContext;
    private Callback mCallback;

    public BikesAdapter(Context mContext, ArrayList<Bike> bikes) {
        this.mContext = mContext;
        this.bikes = bikes;
    }

    @NonNull
    @Override
    public BikesAdapter.BikesViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View mItemView = LayoutInflater.from(mContext).inflate(R.layout.bike_list_item, parent, false);
        return new BikesViewHolder(mItemView, this);
    }

    @Override
    public void onBindViewHolder(@NonNull BikesAdapter.BikesViewHolder holder, int position) {
        final Bike singleItem = bikes.get(position);

        holder.BikeName.setText(singleItem.getModel());

        Picasso.with(mContext).load(singleItem.getImage()).resize(50, 50).into(holder.BikeImage);

        holder.bikeView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mCallback.onItemClicked(singleItem);
            }
        });
        holder.BikeImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(mContext, singleItem.getModel(), Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public int getItemCount() {
        return bikes.size();
    }

    public class BikesViewHolder extends RecyclerView.ViewHolder {

        public final TextView BikeName;
        public final ImageView BikeImage;
        public final Button bikeView;
        final BikesAdapter mAdapter;

        public BikesViewHolder(@NonNull View itemView, BikesAdapter mAdapter) {
            super(itemView);
            this.BikeName = itemView.findViewById(R.id.bikeName);
            this.BikeImage = itemView.findViewById(R.id.bikeImage);
            this.bikeView = itemView.findViewById(R.id.btn_view);
            this.mAdapter = mAdapter;
        }
    }
    
    public void setCallback(Callback callback) {
        mCallback = callback;
    }

    public interface Callback {
        void onItemClicked(Bike bike);
    }
}

What is wrong here? Why the images are not showing in my RecyclerView? I tried with Picasso like you see in BikeAdapter under onBindViewHolder() method, what I am missing I do not understand!

Answer 1

First of all the way we call Picasso has changed.

Picasso.get().load("imageUrl").into(imageView);

Also check if you have internet permission in your manifest

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

Finally try to turn on Picasso logs to see if there is an error there

Picasso.get().setLoggingEnabled(true)

Just in case be sure that your image url loads properly on a browser.