InAngularJs，NG-Src在IMG不顯示本地文件

我有，除其他事情，在圖像輸出的ng-repeat：InAngularJs，NG-Src在IMG不顯示本地文件

<div class="installation" get-products install-index="{{$index}}" ng-repeat="installation in installations track by $index"> 
... 
    <img ng-src="{{installation.logo}}" /> 
... 
</div>

當我的應用程序啓動時，它需要下載圖像和存儲他們的位置在本地數據庫中。當用戶瀏覽網頁的設備被填充：

<div class="installation ng-scope" ng-repeat="installation in installations track by $index" install-index="43" get-products=""> 
... 
    <img src="C:/Users/.../AppData/Local/Packages/.../LocalState/installations/.../...png" ng-src="C:/Users/.../AppData/Local/Packages/.../LocalState/installations/.../...png"> 
... 
</div>

（用點隱藏個人和客戶數據）

如果我粘貼src位置到我的瀏覽器我看到的圖像，所以我知道它保存在那個位置。但是，在我的應用程序中沒有顯示。這是通過應用程序下載文件的一個常見問題。我知道圖像是在正確的區域和src位置是正確的，但沒有一個顯示。

---編輯---

我有應用白名單，因爲我得到了一個不安全的file:///。另外，當我使用相對路徑時，它工作正常。我有一個預加載的數據庫，指向應用程序文件內的文件。

我不認爲這是一個接入問題，因爲我有一個.db文件在我所有的數據正在從拉同一位置。

---編輯---

我將它設置爲file:///C:/...和我有同樣的問題。

我也試過file:///C:/...，http://localhost/...，http://localhost:/...，http://localhost:C/...，C:/...，和file:///...。巫婆沒有給我任何東西。前兩個本地主機項目給我一個破碎的圖像圖標，就是這樣。我沒有運行本地服務器，只是想我會嘗試它。

來源

2015-09-23 dcp3450

應用程序是否託管在網絡服務器中，因爲當您說本地時它剛剛通過file：//打開？如果是這樣，那就是爲什麼 - – Matt

對不起，我沒有提及它是使用ngCordova和AngularJS的Cordova應用程序。所以應用程序以及這些文件對本機來說都是本地的，而不是基於網絡的。 – dcp3450

您可以用兩種不同的方式做到這一點： 1）使用文件協議 2）使用本地主機服務器來存儲圖片，並從本地主機訪問它

出於安全原因，你不能使用你的文件系統路徑的圖像。你甚至不應該使用它，因爲當你的應用程序被託管時，你不會通過這樣的路徑訪問圖像。

方法1：只需添加文件：///代替使用c：/。文件是您的文件系統的協議，就像http或HTTPS是Web協議一樣。注：我之前沒有測試過或使用過，所以我不太確定。我從一個小型移動設備發佈這個。但我相信它應該起作用。

方法2：啓動wampserver或Python的服務器或您有任何本地服務器。把圖像放在你的服務器可以訪問的文件夾中（如果wampserver，這將是你WWW中的文件夾或目錄）。說，文件夾的名稱是「my_images」和你wampserver是在本地主機上運行..你可以訪問圖像，像這樣： http://localhost/my_images/image_name 使用此路徑爲您的NG-SRC。

來源

2015-09-23 19:41:42

感謝所有這些。我會嘗試方法1.這個應用程序將永遠是本地的用戶機器，並不向公衆開放。我在自己的工作中使用了很多麻煩/麻煩，但客戶甚至不會開始掌握（笑）。 – dcp3450

我把它設置爲'file：/// C：/ ...'，我遇到同樣的問題。 – dcp3450

我也嘗試過'file：/// C：/ ...'，'http：// localhost/...'，'http：// localhost：/ ...'，'http：// localhost： C/...'，'C：/ ...'和'file：/// ...'。女巫沒有給我任何東西。前兩個'localhost'項目給我一個破碎的圖標圖標，就是這樣。我沒有運行本地服務器，只是想我會嘗試它。 – dcp3450

呵呵，科爾多瓦的應用程序..你爲什麼不放在一個圖像文件夾中的文件在您的項目。因爲所有文件都將使用index.html加載（我假設）。您可以輕鬆地引用相對於index.html位置的文件。我通常會如何組織我的項目是我的索引。html和包含js，CSS等資源的文件夾將處於同一級別，因此我可以使用ng-src =「img/image_name」輕鬆獲取圖像文件。所以我可以有這樣的index.html IMG 結構..image_name.ext ..image2.ext CSS ..style.css測試在瀏覽器中的位置，如果它的工作原理，它在設備上工作。科爾多瓦會知道如何將d翻譯成可以識別的東西。

這是一些示例代碼，我很快放在一起。我測試了它，它工作。首先，我使用文件插件創建一個目錄，然後使用文件傳輸下載到此目錄。將文件傳輸的url參數替換爲您想從中下載的網址。

$ionicPlatform.ready(function() { 

      $cordovaFile.createDir(cordova.file.externalDataDirectory, 
       file_location,false).then(
        function(success){ 

        return success; 
       },function(error){ 

        return error; 
       }).then(function(value){ 

        var url = material.file_uri; 
        var targetPath = cordova.file.externalDataDirectory 
          + "/" +file_location + "/" + file_name; 
        var trustHosts = true 
        var options = {}; 

        $cordovaFileTransfer.download(url, targetPath, options, trustHosts) 
         .then(function(result) { 
         console.log(result) 
         }, function(err) { 
         console.log(err) 
         }, function (progress) { 
         $timeout(function() { 

          console.log(Math.floor((progress.loaded/progress.total) * 100)); 

         }) 
         });    

      }) 

     })

來源

2015-09-24 01:14:54

文件正在下載並存儲到設備中。使用'cordova-plugin-file'通過cordova文件結構提供可寫目錄。 – dcp3450

現在，該應用程序是「靜態」的，所有內容都以這種方式被拉取。但是，現在我必須通過我寫的API來使其動態並從網絡中提取內容。 – dcp3450

你在使用ng-cordova的文件插件嗎？他們在那裏提供一個你可以使用的目錄結構。如果你已經成功地在動態下載文件的時候，你將會提供一個下載位置給插件，你可以利用這個位置。文件傳輸和文件插件都使用承諾，您可以使用此承諾發現它何時下載並在加載圖像時使用相同的目錄。還要確保你存儲在外部目錄中，我認爲它應該是Cordova.file.externalDirectory左右。如果你是s –

由於我科爾多瓦文件和Windows打得不好使用呼叫cordova.file.dataDirectory沒有奏效。相反，我用返回的fs對象由window.requestFileSystem(...,function(fs){...});

產生當我保存路徑以及創建目錄和位置數據的路徑我用fs.winpath其返回C:/...。網絡（科爾多瓦基本上是這樣）將不允許你訪問與網站/應用程序結構不相關的本地文件，現在這很明顯。

我挖到fs對象，發現fs.root.nativeURL指向ms-appdata:///local/。切換到此仍將所有文件和目錄下載到同一位置，但將其作爲文件位置存儲到數據庫。當應用程序加載ms-appdata路徑而不是C:/路徑顯示的圖像。

來源

2015-09-25 20:40:51 dcp3450

InAngularJs，NG-Src在IMG不顯示本地文件

回答

相關問題