Question

在Ionic应用程序中，用户可以从他的设备中选择图像（使用this plugin）。然后，使用图像中的路径（plugins.imagePicker.getPictures( results => { this.avatar_path = results[0] } )），我需要在webview中显示图像。

results[0]

我无法在图片的src中使用其路径（<img src="{{ avatar_path }}" />）：

<img>

赢了工作。我是否需要从文件中获取二进制文件（使用File API）并设置为{{1}} src？

Answer 1

我正在使用此插件访问存储在设备上的图像：

https://github.com/apache/cordova-plugin-camera

然后在控制器中使用这样的东西：

$scope.chooseFile = function() {
  var cameraOptions = { quality: 100,
    destinationType: navigator.camera.DestinationType.FILE_URI,
    sourceType: navigator.camera.PictureSourceType.SAVEDPHOTOALBUM,
    targetWidth: 600,
    targetHeight: 600,
    encodingType: Camera.EncodingType.JPEG};

  navigator.camera.getPicture(function (imageURI) {

    var nameArr = imageURI.split("/");

    $scope.attachment.name = nameArr[nameArr.length-1];
    $scope.attachment.imageURI = imageURI;

    DbLocalValueService.insertLocalValue("HomeImagePath",$scope.attachment.imageURI);

  }, function(err) {
    console.log(JSON.stringify(err));
  }, cameraOptions);

};

在HTML方面使用类似的东西：

<img ng-src="{{attachment.imageURI}}" />

如果你想在运行时更改图像的src，还要确保使用ng-src而不是src。

使用函数DbLocalValueService.insertLocalValue，我将图像的路径存储在sqlite数据库中，并通过resolve在初始化视图时获取它的值。您可以自己决定如何存储图像的路径。

Answer 2

只需使用

<img src={{ avatar_path }} />

这对我有用，但我正在使用离子1和相同的插件ImagePicker。

离子：从设备的文件路径显示图像

2 个答案: