Question

我有一个ng-repeat，其中包括图像上的输出：

<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:///感到不安全。此外，当我使用相对路径时它工作正常。我有一个预加载的数据库，指向app文件中的文件。

我不认为这是一个访问问题，因为我在同一位置有一个.db文件，我的所有数据都来自该文件。

---编辑---

我将其设为file:///C:/...，我遇到了同样的问题。

我还尝试了file:///C:/...，http://localhost/...，http://localhost:/...，http://localhost:C/...，C:/...和file:///...。巫婆都没有给我任何东西。前两个localhost项确实给了我一个破碎的图像图标，关于它。我没有运行本地服务器，只是想我试试。

Answer 1

您可以通过两种不同的方式执行此操作： 1）使用文件协议 2）使用本地主机服务器存储图片并从本地主机访问它

出于安全原因，您无法将文件系统路径用于图像。您根本不应该使用它，因为当您的应用程序被托管时，您将无法通过此类路径访问该图像。

方法1：只需添加file：///代替c：/。 file是文件系统的协议，就像http或HTTPS是Web协议一样。注意：我之前没有测试或使用过，所以我不确定。我是从一个小型移动设备上发布的。但我相信它应该有用。

方法2：启动您的wampserver或python服务器或您拥有的任何本地服务器。将图像放在服务器可以访问的文件夹中（如果是wampserver，这将是WWW中的文件夹或目录）。说文件夹的名称是“my_images”，你的wampserver在localhost上运行..你可以像这样访问图像： http://localhost/my_images/image_name 将此路径用于ng-src。

Answer 2

哦，一个Cordova应用程序..为什么不将文件放在图像文件夹中在你的项目中。因为所有文件都将使用index.html加载（我假设）。您可以轻松地引用相对于index.html位置的文件。我通常如何组织我的项目是，我的index.html和包含js，CSS等资源的文件夹将在同一级别上，因此我可以使用ng-src =＆＃34; img / image_name＆＃轻松获取图像文件34 ;.所以我可以有这样的结构 INDEX.HTML IMG ..image_name.ext ..image2.ext CSS ..style.css在浏览器位置测试它是否有效，它将在设备上运行。科尔多瓦会知道如何将d翻译成它能识别的东西。

这是一些示例代码，我很快就放在了一起。我测试了它，它工作。首先，我使用文件插件创建一个目录，然后使用文件传输下载到此目录。将文件传输的url参数替换为您要从中下载的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));

                        })
                      });               

            })

        })

Answer 3

因为我使用cordova.file.dataDirectory的电话无法正常工作，所以我无法使用Cordova文件和Windows。相反，我使用了fs

返回的window.requestFileSystem(...,function(fs){...});对象

在生成保存到路径以及创建目录和位置数据的路径时，我使用fs.winpath返回C:/...。网络（Cordova基本上是）不会允许您访问与网站/应用程序结构无关的本地文件，这一点现在很明显。

我挖到fs对象，发现fs.root.nativeURL点到ms-appdata:///local/。将所有内容切换到此仍然将所有文件和目录下载到同一位置，但将其作为文件位置存储到数据库中。当应用加载了ms-appdata路径，而不是显示图像的C:/路径时。

InAngularJs，img的ng-src不显示本地文件

3 个答案: