Question

我正在尝试从我的照片库中显示照片。

在我的情况下，我使用这个HTML代码来显示图像

<img style="border:1px solid red;width:100%;height:400px;"
                     src="file:///storage/9016-4EF8/DCIM/Camera/20160723_134932.jpg" />

因此，图像未显示。

另外，我验证了这个网址是有效的。我使用了以下代码来确保我可以读取文件：

        File.readAsText("file:///storage/9016-4EF8/DCIM/Camera/", "20160723_134932.jpg")
            .then((obj) => {
                console.log('I CAN READ THE FILE');
            })
            .catch((obj) => {
                console.log(JSON.stringify(obj));
            });

我还有其他事情要做：

更改了元标记：

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

修改了Config.xml

<access origin="*"/>
<allow-intent href="file:///*"/>
<allow-navigation href="*://*/*"/>

但仍然无效，图像不会显示。

我已经失去了三天的努力。

Answer 1

我无法相信我确实找到了解决方案。

如果您使用--livereload运行Ionic，则不会显示图像。

无意中我使用以下命令运行项目：

ionic run --device

没有“--livereload”。我这样做是为了完成我的问题而且vo，它有效。

OMG !!!!!

所以，我将保留这个问题，以便进一步搜索并帮助某人。

现在我可以睡觉了，哈哈。

Answer 2

我通过使用cordova文件插件（cordova-plugin-file）中的方法readAsDataURL解决了这个问题。无需更改CSP或config.xml。仅测试了Android设备和模拟器（使用--livereload））。

this.camera.getPicture(options).then((imageUri) => {
  const indexOfLastSlash = imageUri.lastIndexOf('/');
  const path = imageUri.substring(0, indexOfLastSlash);
  const filename = imageUri.substring(indexOfLastSlash + 1);
  this.file.readAsDataURL(path, filename).then((imageDataUrl) => {
    this.imageDataUrl = imageDataUrl;
  })
}, (err) => {
});

这只是一种解决方法，不应在生产中使用，因为每个图像都会加载到内存中。

离子读取本地照片和显示

2 个答案: