J'ai un problème affichant des images téléchargées sur Cordova.file.DataDirectory dans mon application angulaire / ionique / Cordoue.
J'utilise Cordova-plugin-file et je suis capable de télécharger les fichiers et d'extraire les URL à l'aide de .Tointernalurl () et / ou .Tourl (). Cependant, la vue de la liste angulaire les rejetera. J'utilise WKWebView for iOS et mon code fonctionne bien sur Android (à l'aide de .Tointernalurl ()). J'ai whitelisted à la fois cdvfile: // * et fichier: /// * dans la configuration et dans la stratégie de sécurité de Meta Content-Security ...
J'ai ajouté des captures d'écran
Voici la capture d'écran de la console pour les liens générés par .Tointernalurl ()
Voici la capture d'écran des liens générés par .Tourl ():
Voici la stratégie de sécurité IM en utilisant:
4 Réponses :
OK, il s'avère donc que mon problème était WKWebView. Je l'utilisais et je ne me suis pas réalisé que c'était la source de mon problème.
Donc d'utiliser une trajectoire d'image stockée dans l'attribut SRC, n'utilisez pas CDVFILE: // ou fichier: ///. Créez plutôt un chemin qui ressemble à ceci:
http: // localhost: 12344 / bibliothèque / nocloud / ho_tylw7ygc.jpg < / p>
Prepend " http: // localhost: 12344 / bibliothèque / nocloud " à l'entrée.fulpath et vous «Récidurez tous pour pointer sur la date de données de votre application.
Merci pour l'info! Je sauve mes images dans cordova.file.cachedirectory alors mes liens ressemblent à ./ bibliothèque / cachettes / fichier nom_jpg .
Hé, j'ai le même problème mais avec la vidéo, et je ne peux pas le faire travailler. Pourriez-vous s'il vous plaît m'aider? C'est ce que j'obtiens comme URL absolu: fichier: /// var / mobile / conteneurs / data / application / a313b954-55c5 -49f1-801f-5af51954-801f-5af5196A4 E8E / Bibliothèque / Fichiers / VI Deo / High- Genoux.mp4 . Et ce sont des combinaisons que j'ai essayées (non d'entre eux fonctionnant): http: // localhost: 12344 / bibliothèque / fichiers / vidéo / high-gene.mp4 http: // localhost: 12344 / Vidéo / High-Knees.mp4 http: // localhost: 12344 / Var / Mobile / Conteneurs / Données / Applicatio N / A313B954-55C5-49F1 -801F-5AF519EA4E8E / L IBRARY / Fichiers / Vidéo / H Igress-Knees.mp4
Laissez-moi comprendre cela correctement ... J'ai besoin d'un serveur HTTP dans mon application pour que cela fonctionne?
Pour que cela fonctionne, je devais faire le tour suivant:
Ensuite, la chose a commencé à travailler. Notez que j'utilise le NPM PACAKGE 'local-WebServer' en tant que Cordova-labS-local-Webserver (version 1.0.0-Dev.) Les choses peuvent être différentes dans d'autres versions.
Pour les personnes utilisant Ionic 3, cela a fait le tour pour moi:
import {normalizeURL} from 'ionic-angular';
normalizeURL(cordova.file.dataDirectory + file.fullPath)
Une autre approche qui n'implique pas l'utilisation d'un serveur Web local consiste à créer une URL à l'aide d'URL.CreateObjecturl à partir d'une blob. Assurez-vous simplement de révoquer l'URL lorsque vous avez terminé de l'utiliser pour éviter les fuites de mémoire.
Notez que vous devrez ajouter "BLOB:" à votre valeur par défaut-src dans le contenu-Security-Policy: p>
Pour ce faire, vous devez lire l'entrée de fichier en tant que arraybuffer, créer un BLOB, puis créez une URL, cette URL fonctionne bien pour des vidéos et des images à condition que vous avez ajouté "BLOB:" à contenu-Security-Policy P>
const urls:string[] = [];
function createBlobURL(blob:Blob) : string {
const url = URL.createObjectURL(blob);
urls.push(url);
return url;
}
function clearBlobURLs() {
urls.forEach(url => {
URL.revokeObjectURL(url);
})
}
export {createBlobURL,clearBlobURLs};