0

I'm having problem with my laravel file system CORS, I'm trying to cache the image from the url (which is also my website) in my ionic application but it's failing because of the error. I tried the image from https://reqres.in/api/users/1 and there is no problem caching the image in my ionic application. I guess the problem here is in my laravel website

Constantine Awa-ao
  • 35
  • 8
  • Are you using barryvdh's laravel-cors plugin? – jkruskie Apr 22 '19 at 16:28
  • No. I use this https://stackoverflow.com/questions/39429462/adding-access-control-allow-origin-header-response-in-laravel-5-3-passport so that I can access my api and it helped me, but the problem now is caching the image from the url of my website. – Constantine Awa-ao Apr 22 '19 at 16:29
  • Here is my code in my middleware Cors.php return $next($request) ->header('Access-Control-Allow-Origin', '*') ->header('Access-Control-Allow-Methods', 'GET, POST') ->header('Access-Control-Allow-Headers', 'Content-Type, X-Requested-With'); – Constantine Awa-ao Apr 22 '19 at 16:56

1 Answers1

1

In one of my current projects I have to save 200+ images in my Ionic App from a request to my server.

The way I handled this problem was converting the image to Base64 using Image Intervention and responding to the request with back to the app to then save the Base64 in the Ionic Storage like so.

Laravel Controller

public function grabImages(Request $request){
  $image = (string) Image::make('public/bar.png')->encode('data-url');

  $data = {
    'base64' : $image,
    'file_name' : 'test'
  }

  return $data;
}

Ionic

After receiving the data you can just store it in the Ionic Storage and access it wherever you would like to, even offline. To display it all you have to do is set the image source to the Base64. Using this method also solves a few problems, such as the user cannot see the images in the image gallery, as well as allows you to store them and use them offline for as long as you would like and remove them whenever.

As ImJT said I am using the barryvdh's laravel-cors plugin as well.

Hope this answered your question, good luck!

Andrew Gosselin
  • 153
  • 1
  • 16
  • I will try this tomorrow, my day is wasted because of trying to use the image caching and making it work in ionic 4 and i will end up doing this other option. but I guess I have no other choice, by the way, do you have the code snippet in displaying the image by setting the image source to base 64? and thank you so much for this suggestion, I was about to do your suggestion but I chose the image caching because I read somewhere that saving the image as base64 in ionic storage will make the app slow. – Constantine Awa-ao Apr 22 '19 at 17:23
  • I did your advice and I hope it will not make the app very slow. Thanks again. – Constantine Awa-ao Apr 23 '19 at 12:51
  • Sorry for not answering your last question, I was at work. With 200+ images it takes less than 300 ms. As long as you arent loading an insane number of images like I am it will be the same speed. Were just essentially taking the photos raw data so it will be the same size. – Andrew Gosselin Apr 23 '19 at 16:50