Search code examples
androidlaravelpicassorest

Android studio Display image from Laravel API


I am using Retrofit API to access my Laravel site data. I am not able to display images in my android app.

Here is my Laravel code to save images in my Laravel site.

 $path = 'images/no-thumbnail.jpeg';

    if($request->has('thumbnail')){
        $extension = ".".$request->thumbnail->getClientOriginalExtension();
        $name = basename($request->thumbnail->getClientOriginalName(), $extension).time();
        $name = $name.$extension;
        $path = $request->thumbnail->storeAs('images', $name, 'public');
    }

Here is the API response for the Products tabel.

[{"id":1,"user_id":"1","title":"White T shirt","description":"White T shirt small size","categorie":"1","price":"50","discount_price":"0","thumbnail":"images\/81vzc0ciKwL._AC_UX679_1619280040.jpg","slug":"white-t-shirt","options":null,"featured":"0","status":"0","created_at":"2021-04-24T16:00:40.000000Z","updated_at":"2021-04-24T16:00:40.000000Z","deleted_at":null}]

The response of the image is this "thumbnail":"images/81vzc0ciKwL._AC_UX679_1619280040.jpg"

For my android app, I am using Picasso here is the code.

Picasso.get().load(shopesModel.getThumbnail()).into(holder.shopImg);

But still, I am not getting images in my android app. I am getting other fields of the product table.

Here is the screenshot of the app

enter image description here

Where should I change my code. Laraval or change my app code so that I can get images from Laravel.


Solution

  • Since your json response doesn't have qualified url in thumbnail

    "thumbnail":"images\/81vzc0ciKwL._AC_UX679_1619280040.jpg" 
    

    There two ways you can fix 1.best solution is to send full url image path from server side 2.hardcoding base url in your android and append to Picasso

    "thumbnail":"https://urdomain/storage/images/81vzc0ciKwL._AC_UX679_1619280040.jpg" 
    

    or

    String baseUrl="https://urdomain/storage/";
    
    Picasso.get().load(baseUrl+shopesModel.getThumbnail()).into(holder.shopImg);