在InAngularJs中，本地文件不显示img的ng-src [英] InAngularJs, ng-src for img doesn't show for local files

问题描述

我有一个 ng-repeat ，除其他外，它在图像上输出:

I have an ng-repeat that, among other thing, outputs on image:

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

启动我的应用程序时，它将下载所需的图像并将其位置存储在本地数据库中.查看页面时，将填充安装:

When my app starts it downloads needed images and stores their location in a local database. When the page is viewed the installations are populated:

<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>

(用于隐藏个人和客户数据的点)

(dots used to hide person and client data)

如果将src位置粘贴到浏览器中，则会看到该图像，因此我知道它已保存在该位置.但是，在我的应用程序中没有显示.对于下载的文件，这是应用程序中经常出现的问题.我知道图片位于正确的区域中，并且src位置正确，但是均未显示.

If I paste the src location into my browser I see the image so I know it's saved at that location. However, in my app it's not showing. This is a constant issue through the app with the downloaded files. I know the image are in the correct area and the src location is correct but none of them show.

-编辑--

我确实应用了白名单，因为我对 file:///感到不安全.另外，当我使用相对路径时，它运行良好.我有一个预加载的数据库，该数据库指向应用程序文件中的文件.

I do have white listing applied as I was getting an unsafe for file:///. Also, when I was using a relative path it was working fine. I had a preloaded database that pointed to file inside the app files.

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

I don't think it's an access issue since I have a .db file at the same location that all my data is being pulled from.

-编辑--

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

I set it as file:///C:/... and I'm having the same issue.

我还尝试了 file:///C:/... ， http://localhost/... ， http://localhost:/... ， http://localhost:C/... ， C:/... 和 file:///....没有一个女巫给我任何东西.前两个localhost项确实给了我一个损坏的图像图标，仅此而已.我没有运行本地服务器，只是想尝试一下就可以了.

I also tried file:///C:/... , http://localhost/..., http://localhost:/..., http://localhost:C/..., C:/..., and file:///.... None of witch give me anything. The first two localhost items do give me a broken image icon, that's about it. I'm not running a local server, just thought I'd try it.

推荐答案

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

You can do this in two different ways: 1) Use the file protocol 2) use a local host server to store the picture and access it from the local host

出于安全原因，您不能将文件系统路径用于图像.您甚至都不应该使用它，因为当您托管应用程序时，您将不会通过此类路径访问图像.

for security reasons you cannot use your file system path for images. you shouldn't even use it at all, because when your app gets hosted, you wouldn't be accessing the image via such paths.

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

method 1: just add file:/// in place of the c:/. file is the protocol for your file system, just as http or HTTPS is a web protocol. NB: I haven't tested or used this before so I'm not really certain. I'm posting this from a small mobile device. but I believe it should work.

方法2:启动您的wampserver或python服务器或您拥有的任何本地服务器.将图像放在服务器可以访问的文件夹中(如果是wampserver，则为WWW中的文件夹或目录).说文件夹的名称是"my_images"，并且您的wampserver在本地主机上运行. http://localhost/my_images/image_name 将此路径用于您的ng-src.

method 2: start your wampserver or python server or any local server you have. put the image in a folder where your server can access (if wampserver, this would be a folder or directory in your WWW). say the name of the folder is "my_images" and your wampserver is running on localhost.. you can access the image like so: http://localhost/my_images/image_name use this path for your ng-src.

这篇关于在InAngularJs中，本地文件不显示img的ng-src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！