使用typescript文件数组中的图像标签html Angular 2

我目前正在制作一个web应用程序，我可以在应用程序上传csv数据和图片并显示它们。目前我被卡住了，因为我无法显示我导入的图像。我导入图片来自本地驱动器上有：使用typescript文件数组中的图像标签html Angular 2

<li *ngIf="loadService.getLoads().length > 0"> 
    <input type="file" (change)="loadService.importPictures(loadService.getLoads(),$event)" 
      name="datafile" size="40" multiple> 
</li>

如果CSV列表将不会导入或空的，则第二个按钮，载入图片将不会显示。然后图像被放入一个Load模型类中，该类有一个称为File类型图片的字段。 ImportPictures的方法只是将正确的图片添加到相应的负载。

我想能够使用这个文件在图像的HTML标记，但我似乎无法得到它的工作？有没有办法做到这一点？

我想是这样的：

<img *ngIf="load.picture" 
     name="recipient" 
     [(ngModel)]="load.picture" 
     src="{{load.picture}}" 
     ngDefaultControl/>

来源

2017-08-22 Frédéric Vanderheyden

你是否在尝试使用它们之前上传图像？是否有任何错误消息？文件路径是否正确？ – hagner

我在我的电脑上有图像，我通过按下一个按钮将其添加到我的计算机上的一个文件夹中。然后我选择我想要在网页上显示的图像，并将这些图像放入File（File []）的数组中。文件数组然后存在具有以下格式的文件：** File {name：“023008.png”，lastModified：1503152676606，lastModifiedDate：Sat Aug 19 2017 16:24:36 GMT + 0200（Romance（zomertijd）），webkitRelativePath ：“”，size：445672，...} **。我现在想在我的html中使用这些文件来显示图像。 –

使用文件上传所以唯一的办法，你将能够显示它们是内有他们的时候浏览器不会给你的完整路径的文件与您的html文件相同的文件夹。然后，你可以这样做：

<img [src]="load.name"/>

但这只会在严格控制的环境中工作。要在纯开发环境以外使用这些文件，您需要首先将文件上传到某个地方，然后通过将src属性与新创建的url绑定来显示它们。

来源

2017-08-22 15:19:45 hagner

我不认为我需要我的文件的完整路径，因为我有我的Typescript中定义的图像阵列。我只需要在我的html中显示它们。问题是我需要以动态的方式添加图片，因为负载不断变化，所以我不能简单地将它们放在项目本身的文件夹中。或者我误解了你？如果我用[src]尝试它，那么我收到一个未找到的404：** GET http：// localhost：4200/[object％20File] 404（Not Found）** –

对，所以我同意你不能将它们保留在特定的文件夹中，因为您需要它是动态的。但是，您的HTML需要该文件的路径，它不能在不知道路径的情况下显示图像。你无法获得路径，浏览器不会提供给你。这就是为什么你首先上传图像到某种类型的存储，然后使用新的网址来显示图像。 – hagner

哦，我明白了，没有考虑到这一点......你有建议作为存储使用吗？谢谢btw使它确定这样做没有办法。 –

使用typescript文件数组中的图像标签html Angular 2

回答

相关问题