离子：从设备的文件路径显示图像-Java 学习之路

在Ionic应用程序中，用户可以从他的设备中选择图像（使用this plugin） . 然后，使用图像中的路径（ file://whatever ），我需要在webview中显示图像 .

plugins.imagePicker.getPictures(
    results => {
        this.avatar_path = results[0]
    }
)

我不能在图像的src中使用它的路径（ results[0] ）：

<img src="{{ avatar_path }}" />

不行 . 我是否需要从文件中获取二进制文件（使用File API）并设置为 <img> src？

2 回答

好吧，我正在使用这个插件来访问存储在设备上的图像：

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在初始化视图时获取它的值 . 您可以自己决定如何存储图像的路径 .

回复于 2024-05-02T11:36:28+08:00

0
只是用
```
<img src={{ avatar_path }} />
```
这对我有用，但我正在使用离子1和相同的插件ImagePicker .
回复于 2024-05-02T11:36:28+08:00

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

2 回答

相关问题