如何从组件中删除“资产”文件夹中的图像

Question

我有一个有角度的7项目，我在一个组件中显示一个图片库，并且我在资产/图像文件夹中有所有的图像。每个图像都有自己的按钮要删除，而我的delete()函数是空的，因为我不知道如何从组件中删除图像。

我到处搜索，但我发现的只是人们问如何访问这些图片，而不是如何删除它们。我很感谢你的帮助。

编辑：，在这一刻，我从可视化中删除图像，但我也想从本地的文件夹中删除它。

Answer 1

编辑：

不能使用浏览器中的JS从用户的计算机或服务器中删除文件。您应该向服务器发送一个http请求，该服务器将为您完成此任务。

但是删除文件是很少见的，特别是对于一个没有用户管理和任何其他后端的应用程序(否则你不会问如何用角度来完成)。我认为你应该重新考虑你在做什么。

如果您只想隐藏图像对用户‘永远’，您可以使用localStorage存储已删除的图像，并过滤出图像在每次重新加载。

您有多个图像，您希望它们是动态的，所以您应该将其移动到组件的JS端，并使用html来显示它。因此，您应该创建一个包含图像的数组，例如：

public images = ['imagePath1', 'imagePath2', 'imagePath3'];

或者，如果您有更多与图像相关的信息，则可以使用对象。

public images = [{path: 'imagePath1', description: 'image 1'}, {path: 'imagePath2', description: 'image 2'}];

然后，在html中，使用ngFor和变量来显示图像：

<div *ngFor="let image of images">
    <img [src]="image.path" [alt]="image.description" />
    <small>{{image.description}}</small>
</div>

不要忘记添加按钮，您应该将图像的索引传递给它，这样您就知道要从数组中删除哪个图像了：

<div *ngFor="let image of images; let i = index">
    <img [src]="image.path" [alt]="image.description" />
    <small>{{image.description}}</small>
    <button (click)="remove(i)">remove this image</button>
</div>

现在我们可以开始处理remove函数了。返回到您的JS代码并添加索引参数。在函数内部，只需从数组中删除索引，图像就会消失。

public remove(index: number) {
    this.images.splice(index, 1);
}

就这样！

如果你想永久删除图像，那就更复杂了。您应该有一个服务器，并且应该在remove上发送一个http请求，让它知道您想要删除一个图像，并且它将处理真正的图像删除。