This is a migrated thread and some comments may be shown as answers.

Image Responsible and Offline not working

5 Answers 108 Views
Bugs & Issues
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Manuel
Top achievements
Rank 1
Manuel asked on 21 Sep 2015, 09:02 PM

Hi,

 

I am trying to use the new backend service offline functionality for images of the backend services.

I uploaded some images to the file browser and activated the Responsive Images service.

Noch I added the below code - guided by your documentation. But the image does not load. Whatever I do the app will not load the image. I checked the permissions of the backend services and the URL of the image. Everything seems to be fine.

Any hint, what else I could try?

<div data-role="view" data-title="Test" id="about">
    <img data-responsive data-offline data-src="http://bs2.cdn.telerik.com/v1/[myKey]/[imageID]" />
   
</div>
<script type="text/javascript">
    var evl = new Everlive({
        apiKey: appSettings.everlive.apiKey
    });
    evl.helpers.html.processAll();
</script>

5 Answers, 1 is accepted

Sort by
0
Anton Dobrev
Telerik team
answered on 23 Sep 2015, 04:01 PM
Hi Manuel,

Could you confirm that the URL set to the data-src attribute is a valid one?

Also, you can specify options to the process and processAll methods as explained here that will help you handle better any errors.

If this does not solve the issue, provide a runnable sample and we will be able to investigate this.

I look forward to your reply.

Regards,
Anton Dobrev
Telerik
 
Everlive is now Telerik Backend Services, and is part of the Telerik Platform.
 
0
Manuel
Top achievements
Rank 1
answered on 03 Oct 2015, 12:17 PM

Hi,

I checked the URL of the data-src attribute. That's correct.

I tried to get the results of the processAll method but it returned 0 results. None processed successfully and none with errors.

If I user <img src="[MyURL]"/> the image is displayed.

If I change it to <img data-src="[MyURL]"/> the image is not displayed.

 Any Idea what I a m doing wrong?

I created a basic project with the most minimal entries and attached it.

(I removed my Application Key from the source code. You need to insert yours. And you might change the img source path.)

But how can I provide you the zip-file? Upload is not possible?

 Thanks and best regards

Manuel

 

0
Anton Dobrev
Telerik team
answered on 06 Oct 2015, 11:42 AM
Hi Manuel,

You can use the Kendo UI Dojo in order to supply the sample or paste it in this thread.

By any chance, is the image URL from an external domain which is not configured in the backend project?

Thanks in advance.

Regards,
Anton Dobrev
Telerik
 
Everlive is now Telerik Backend Services, and is part of the Telerik Platform.
 
0
Manuel
Top achievements
Rank 1
answered on 16 Oct 2015, 01:02 PM

Hi,

the image is from the URL bs3.cdn.telerik.com as stated in the first example.

And I have added this URL as domain to the responsive images settings in the backend services.

I removed My API Key and the Image Name. You would need to add that to work.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>
 
 
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="https://bs-static.cdn.telerik.com/1.5.6/everlive.all.min.js"></script></head>
<body>
    <h1 data-bind="html: title"></h1>
    <img data-src="https://bs3.cdn.telerik.com/v1/[yourKey]/[image]" data-responsive data-offline />
    <script type="text/javascript">
        var el = new Everlive({
            apiKey: '[yourKey]'
        });
        el.helpers.html.processAll().then(function (results) {
            results.processed;
            results.failed;
        });
    </script>
</body>
</html>

0
Anton Dobrev
Telerik team
answered on 20 Oct 2015, 11:15 AM
Hello Manuel,

Thank you for taking the time to arrange this example.

To use offline support for files you need to enable the files config in the offline settings of the Everlive object. For example:
var el = new Everlive({
            apiKey: 'my-api-key',
            offline: {
                storage: {
                    provider: Everlive.Constants.StorageProvider.LocalStorage
                },
                encryption: {
                    provider: Everlive.Constants.EncryptionProvider.Default
                },
                files: {
                    storagePath: 'file/system/path',
                    metaPath: 'file/system/path/meta'
                }
            }
        });

Otherwise, the offline attribute will fail silently.

Since the offline persister for files requires a file system to work with it will only work in Cordova (you need to enable the Cordova File API plugin and test on an actual device) and Node.js applications as stated here.

You can continue to use the responsive attribute without the offline one. For example:
<img data-src="https://bs3.cdn.telerik.com/v1/[yourKey]/[image]" data-responsive />

Based on your report we were able to identify a few areas of improvement in the docs and in the SDK. As a small token of gratitude I updated your Telerik points.

Let me know if you have further questions or suggestions.

Regards,
Anton Dobrev
Telerik
 
Everlive is now Telerik Backend Services, and is part of the Telerik Platform.
 
Tags
Bugs & Issues
Asked by
Manuel
Top achievements
Rank 1
Answers by
Anton Dobrev
Telerik team
Manuel
Top achievements
Rank 1
Share this question
or