Ionic - Setting an image source as FILE_URI produces: Not allowed to load local resource error
I'm using Android at the moment and developing my app with Ionic. When a user takes a photo, I'm having it append to an ion-slide in a ion-slides element. However, I keep getting "Not allowed to load local resource error." All the permissions are set (The image gets saved)
HTML:
<ion-slide *ngFor="let looImage of looImages">
<img src="{{ looImage }}" imageViewer ion-long-press
(onPressing)="showImageOptions()"/>
</ion-slide>
TS:
options: CameraOptions = {
correctOrientation: true,
quality: 50,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
};
capturePhoto() {
this.camera.getPicture(this.options).then((imageData) => {
this.looImages.push(imageData);
console.log(this.looImages.length);
}, (err) => {
});
}
Full error:
Not allowed to load local resource: file:///storage/emulated/0/Android/data/io.ionic.starter/cache/1538074314258.jpg
android ionic-framework asked Sep 27 '18 at 18:52
JPandaJPanda
54
add a comment |
I'm using Android at the moment and developing my app with Ionic. When a user takes a photo, I'm having it append to an ion-slide in a ion-slides element. However, I keep getting "Not allowed to load local resource error." All the permissions are set (The image gets saved)
HTML:
<ion-slide *ngFor="let looImage of looImages">
<img src="{{ looImage }}" imageViewer ion-long-press
(onPressing)="showImageOptions()"/>
</ion-slide>
TS:
options: CameraOptions = {
correctOrientation: true,
quality: 50,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
};
capturePhoto() {
this.camera.getPicture(this.options).then((imageData) => {
this.looImages.push(imageData);
console.log(this.looImages.length);
}, (err) => {
});
}
Full error:
Not allowed to load local resource: file:///storage/emulated/0/Android/data/io.ionic.starter/cache/1538074314258.jpg
android ionic-framework asked Sep 27 '18 at 18:52
JPandaJPanda
54
add a comment |
I'm using Android at the moment and developing my app with Ionic. When a user takes a photo, I'm having it append to an ion-slide in a ion-slides element. However, I keep getting "Not allowed to load local resource error." All the permissions are set (The image gets saved)
HTML:
<ion-slide *ngFor="let looImage of looImages">
<img src="{{ looImage }}" imageViewer ion-long-press
(onPressing)="showImageOptions()"/>
</ion-slide>
TS:
options: CameraOptions = {
correctOrientation: true,
quality: 50,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
};
capturePhoto() {
this.camera.getPicture(this.options).then((imageData) => {
this.looImages.push(imageData);
console.log(this.looImages.length);
}, (err) => {
});
}
Full error:
Not allowed to load local resource: file:///storage/emulated/0/Android/data/io.ionic.starter/cache/1538074314258.jpg
android ionic-framework asked Sep 27 '18 at 18:52
JPandaJPanda
54
I'm using Android at the moment and developing my app with Ionic. When a user takes a photo, I'm having it append to an ion-slide in a ion-slides element. However, I keep getting "Not allowed to load local resource error." All the permissions are set (The image gets saved)
HTML:
<ion-slide *ngFor="let looImage of looImages">
<img src="{{ looImage }}" imageViewer ion-long-press
(onPressing)="showImageOptions()"/>
</ion-slide>
TS:
options: CameraOptions = {
correctOrientation: true,
quality: 50,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
};
capturePhoto() {
this.camera.getPicture(this.options).then((imageData) => {
this.looImages.push(imageData);
console.log(this.looImages.length);
}, (err) => {
});
}
Full error:
Not allowed to load local resource: file:///storage/emulated/0/Android/data/io.ionic.starter/cache/1538074314258.jpg
android ionic-framework android ionic-framework asked Sep 27 '18 at 18:52
JPandaJPanda
54
asked Sep 27 '18 at 18:52
JPandaJPanda
54
asked Sep 27 '18 at 18:52
JPandaJPanda
54
asked Sep 27 '18 at 18:52
JPandaJPanda
54
asked Sep 27 '18 at 18:52
JPandaJPanda
54
54
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
It's security layer in mobile which denies to load the image from web view. You can use 'DATA_URL' which will return base64 content. you can attach to src property by appending content type and applying DomSanitizer service.
If you still want to use FILE_URI, using ionic-native/file plugin https://ionicframework.com/docs/native/file/, you can move the image in to application data directory and you can access from there.
answered Sep 28 '18 at 1:09
Suresh Kumar AriyaSuresh Kumar Ariya
4,4331215
Hi there, I've taken your suggestion and tried to use the FILE_URI by moving the file. However I still get the issue like so: Not allowed to load local resource: file:///data/user/0/io.ionic.starter/1538505777909.jpg
– JPanda
Oct 2 '18 at 18:44
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52543422%2fionic-setting-an-image-source-as-file-uri-produces-not-allowed-to-load-local%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
It's security layer in mobile which denies to load the image from web view. You can use 'DATA_URL' which will return base64 content. you can attach to src property by appending content type and applying DomSanitizer service.
If you still want to use FILE_URI, using ionic-native/file plugin https://ionicframework.com/docs/native/file/, you can move the image in to application data directory and you can access from there.
answered Sep 28 '18 at 1:09
Suresh Kumar AriyaSuresh Kumar Ariya
4,4331215
Hi there, I've taken your suggestion and tried to use the FILE_URI by moving the file. However I still get the issue like so: Not allowed to load local resource: file:///data/user/0/io.ionic.starter/1538505777909.jpg
– JPanda
Oct 2 '18 at 18:44
add a comment |
It's security layer in mobile which denies to load the image from web view. You can use 'DATA_URL' which will return base64 content. you can attach to src property by appending content type and applying DomSanitizer service.
If you still want to use FILE_URI, using ionic-native/file plugin https://ionicframework.com/docs/native/file/, you can move the image in to application data directory and you can access from there.
answered Sep 28 '18 at 1:09
Suresh Kumar AriyaSuresh Kumar Ariya
4,4331215
Hi there, I've taken your suggestion and tried to use the FILE_URI by moving the file. However I still get the issue like so: Not allowed to load local resource: file:///data/user/0/io.ionic.starter/1538505777909.jpg
– JPanda
Oct 2 '18 at 18:44
add a comment |
It's security layer in mobile which denies to load the image from web view. You can use 'DATA_URL' which will return base64 content. you can attach to src property by appending content type and applying DomSanitizer service.
If you still want to use FILE_URI, using ionic-native/file plugin https://ionicframework.com/docs/native/file/, you can move the image in to application data directory and you can access from there.
answered Sep 28 '18 at 1:09
Suresh Kumar AriyaSuresh Kumar Ariya
4,4331215
It's security layer in mobile which denies to load the image from web view. You can use 'DATA_URL' which will return base64 content. you can attach to src property by appending content type and applying DomSanitizer service.
If you still want to use FILE_URI, using ionic-native/file plugin https://ionicframework.com/docs/native/file/, you can move the image in to application data directory and you can access from there.
answered Sep 28 '18 at 1:09
Suresh Kumar AriyaSuresh Kumar Ariya
4,4331215
answered Sep 28 '18 at 1:09
Suresh Kumar AriyaSuresh Kumar Ariya
4,4331215
answered Sep 28 '18 at 1:09
Suresh Kumar AriyaSuresh Kumar Ariya
4,4331215
answered Sep 28 '18 at 1:09
Suresh Kumar AriyaSuresh Kumar Ariya
4,4331215
4,4331215
Hi there, I've taken your suggestion and tried to use the FILE_URI by moving the file. However I still get the issue like so: Not allowed to load local resource: file:///data/user/0/io.ionic.starter/1538505777909.jpg
– JPanda
Oct 2 '18 at 18:44
add a comment |
Hi there, I've taken your suggestion and tried to use the FILE_URI by moving the file. However I still get the issue like so: Not allowed to load local resource: file:///data/user/0/io.ionic.starter/1538505777909.jpg
– JPanda
Oct 2 '18 at 18:44
Hi there, I've taken your suggestion and tried to use the FILE_URI by moving the file. However I still get the issue like so: Not allowed to load local resource: file:///data/user/0/io.ionic.starter/1538505777909.jpg
– JPanda
Oct 2 '18 at 18:44
Hi there, I've taken your suggestion and tried to use the FILE_URI by moving the file. However I still get the issue like so: Not allowed to load local resource: file:///data/user/0/io.ionic.starter/1538505777909.jpg
– JPanda
Oct 2 '18 at 18:44
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52543422%2fionic-setting-an-image-source-as-file-uri-produces-not-allowed-to-load-local%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
