0

I have an Ionic application that communicates with my Laravel api. I'm trying to get the product details and image from the api and display that data in my Ionic app. I have the images stored on the local disk and also have a db table that contains the path name for each image. But when the Ionic app gets this data back, it just gets a json object that contains the mainImage with a path to the local disk, which of course, I can't use as an img src. My question is, how do I pass the mainImage as a file rather than a json object?

Here is my Laravel function:

public function api_get_non_disliked_for_user($categoryId)
{
    $allProducts = Product::with('mainImage')
         ->where('subSubCategoryId', "=", $categoryId)->orderBy('title')->get();

    return $allProducts;
}

In Product Model:

public function mainImage(){
    return $this->hasOne('App\MainImage', 'productId');
}

In MainImage Model:

public function product(){
    return $this->belongsTo('App\Product', 'productId');
}
Noah Hornak
  • 111
  • 2
  • 4
  • 15

1 Answers1

1

The API should provide the url to the image, not the image file, specially when using Ionic as the front end, because then you just use the url in your html markup and the image will get downloaded automatically.

dhinchliff
  • 1,106
  • 8
  • 17
  • When I get the image and send it back to Ionic app in a JSON object containing the product details and the image for the product, it gives me a url for the image that is 'mainImages/"randomString"'. When I store the images in Laravel, they are stored in my public disk as well as the public folder of the project. But Ionic can never find the image. Is it a matter of what data object I send back or how I specify the src in my img tag? – Noah Hornak Jan 09 '18 at 15:47
  • The API needs to return the full url to the image, so it must start with your base url, followed by the public path to the image. https://stackoverflow.com/questions/28964412/how-to-get-file-path-using-storage-facade-in-laravel-5 – dhinchliff Jan 09 '18 at 16:15
  • Thank you, that did it! I just needed to append 'storage/' to the beginning of the img src. – Noah Hornak Jan 09 '18 at 20:19