離子讀本地照片和顯示

我使用的，於我而言，這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標籤：

<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="*://*/*"/>

但仍然無法正常工作，圖像不顯示。

我已經失去了三天試圖做到這一點。

來源

2016-08-02 Luis Antonio Pestana

我不相信我找到了解決方案。

如果您使用--livereload運行Ionic，則圖像不會顯示。

無意中我運行該命令的項目：

ionic run --device

沒有「--livereload」。我這樣做是爲了完成我的問題，而且它是有效的。

OMG !!!!!

所以，我會保留這個問題的進一步搜索和幫助某人。

現在我可以睡了，哈哈。

來源

2016-08-02 05:18:05

我通過在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) => { 
});

這只是一個解決方法，不應該在生產中使用，因爲每個圖像都會加載到內存中。

來源

2017-06-20 13:12:44 englund

離子讀本地照片和顯示

回答

相關問題