如何从我的组件中删除资源文件夹中的图像

Question

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

我一直在搜索，但发现的只有人们问如何访问图像，而不是如何删除它们。感谢您的帮助。

Answer 1

您有多个图像，并且希望它们具有动态性，因此应将其移至组件的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代码并添加index参数。在函数内部，只需从数组中删除索引，图像就会消失。

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

就这样！

如果要永久删除图像，则更为复杂。您应该有一个服务器，并且应该在remove上发送一个http请求，以使其知道您要删除图像，并且它将处理实际的图像删除。