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
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
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
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
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
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css"
>
<
script
src
=
"http://code.jquery.com/jquery-1.9.1.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.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
>
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