Home / Questions / 59001
Accepted
sioesi
Asked: 2020-03-30 13:52:08 +0800 CST 2020-03-30 13:52:08 +0800 CST

Show images from server to mobile app

  • 772

I have developed a mobile app with Ionic v1 . In one of the modules or sections that my app has, I show user data, such as name , email , telephone and also the IMAGE . The image is saved on my server, my WebService receives the file from the mobile app and saves it.

When I select all users to display on the mobile app the JSONone I submitted has the format of the object plus the base64 encoded image . I tried with 10 or 15 users without any problem but today we went to the QA phase, with around 100 users and there my server collapsed. I think I understand that it is for so many characters that my function returns since the image comes in base64 code .

My webservice is created in WCF framework 4.0 with C# , in the web config I have the following:

<bindings>
  <webHttpBinding>
    <binding name="LargeWsHttp" maxBufferSize="2147483647"
             maxBufferPoolSize="2147483647"
             maxReceivedMessageSize="2147483647"
             transferMode="Streamed"
             sendTimeout="00:05:00">
    <readerQuotas  maxDepth="2147483647"
                    maxStringContentLength="2147483647"
                    maxArrayLength="2147483647"
                    maxBytesPerRead="2147483647"
                    maxNameTableCharCount="2147483647"/>
    <security mode="None" />
    </binding>
  </webHttpBinding>
</bindings>

For the matter of sending and receiving data. But obviously you must exceed this limit. My query is: What is the best option for the treatment of images?

I thought :

  • Send the URL of the image and display it in the application, the problem is that the app can also work offline.

  • Download the image from the mobile app and save it to the app. Here I don't know if it saves as a file or in the app's local database to save it with the base64 code . This download would be done by obtaining the URL of the file.

Users can increase, it can be 500, 1000, 2000 since it is an application that will be very popular within a community of a specific sport.

I receive help and constructive criticism, in order to improve my product.

Anything you need, code, explanations of the flows etc, I will provide.

angularjs

1 Answers

  1. Best Answer

    You can use this plugin , the operation is more than anything:

    It checks if it finds the image in the cache, if it doesn't have it, it downloads it and displays it. The next time the app is opened it will show everything from cache without the need to download again.

    Facility:

    bower install ionic-cache-src

    This plugin depends on ngStorage , ngCordova , angular-svg-round-progress . Therefore, they have to be loaded into the index.html.

    <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script> <!-- Esto puede ser opcional-->
<script src="lib/ngstorage/ngStorage.min.js"></script>
<script src="lib/angular-svg-round-progressbar/build/roundProgress.min.js"></script>
<script src="lib/ionic-cache-src/ionic-cache-src.js"></script>

    It also has to be added to the dependencies in the angular module :

    angular . module(' myApp ', [ ' ionic' , ' ionic-cache-src ' ])

    To see more customization and different ways of using it with other tags , you can visit the repo in the link above.

    • 2