javascript - google - ¿Problema con la aplicación Hybid de Android para mostrar imágenes remotas con el marco Ionic?

ionic google maps native

Question

Soy nuevo en Ionic. Estoy usando Ionic Framework (1.3.20), Angular JS, Cordova 5.0.0

Código de archivo de plantilla browse.html:

<div class="col-50"><img ng-src="{{availableImages[currentImage].src}}" /></div>

código de app.js :

.state(''app.browse'', {
    url: "/browse",
    views: {
      ''menuContent'': {
        templateUrl: "templates/browse.html",
        controller: ''Ctrl''
      }
    }
  })

código controller.js

.controller(''Ctrl'',function($scope) {
      $scope.currentImage = 0;
      $scope.availableImages = [
        {
          src: "http://lorempixel.com/160/160/people/3"
        }
        ];
      console.log("reading image in controller !!!");
})

Detalles del encabezado :

Request URL:http://lorempixel.com/160/160/people/3
Request Method:GET
Status Code:404 Not Found (from cache)
Response Headers
Client-Via:shouldInterceptRequest
Request Headers
Provisional headers are shown
Accept:image/webp,*/*;q=0.8
User-Agent:Mozilla/5.0 (Linux; Android 5.0.2; XT1033 Build/LXB22.46-28; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/42.0.2311.129 Mobile Safari/537.36

Archivo Config.xml :

  <access origin="*"/>

Error en la consola:

GET http://lorempixel.com/160/160/people/3 404 (Not Found)

Verifiqué que la URL http://lorempixel.com/160/160/people/3 mostraba una imagen en mi navegador móvil. pero la imagen no viene en la aplicación.

Answer 1

Construya este plnkr: http://plnkr.co/edit/GprtU3r8NDgYwO6jGRkp?p=preview

Mi archivo html:

<div><img ng-src="{{ availableImages[currentImage].src }}" /></div>

Javascript:

$scope.currentImage = 0;
$scope.availableImages = [{
  src: "http://lorempixel.com/160/160/people/3"
}];

Parece que todo está bien ...
Probado con angularjs 1.3.15

Answer 2

Incluir en una lista blanca los dominios usando cordova-plugin-whitelist resuelve el problema.

Agregue el complemento a través de CLI:

cordova plugin add cordova-plugin-whitelist

y luego agregue la siguiente línea de código al archivo config.xml de su aplicación:

<allow-navigation href="http://*/*" />

y

esta meta en su index.html

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src ''self'' ''unsafe-inline''; script-src ''self'' ''unsafe-inline'' ''unsafe-eval''">

EDITAR: El motivo de este problema:

Desde Cordova 4.0.0 para la actualización de Android:

La funcionalidad de la lista blanca se renovó

• Deberá agregar el nuevo complemento cordova-plugin-whitelist para continuar usando una lista blanca

• Ahora se admite el establecimiento de una Política de seguridad del contenido (CSP) y es la forma recomendada de incluir en la lista blanca (consulte los detalles en el archivo Léame del complemento).

• Las solicitudes de red están bloqueadas de manera predeterminada sin el complemento, por lo tanto, instale este complemento incluso para permitir todas las solicitudes e incluso si está utilizando CSP.

• Esta nueva lista blanca se ha mejorado para ser más segura y configurable, pero el comportamiento de la lista blanca heredada aún está disponible a través de un complemento independiente (no recomendado).

Nota: si bien no es estrictamente parte de este lanzamiento, la última aplicación predeterminada creada por cordova-cli incluirá este complemento de manera predeterminada.