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

Question

我有一个 angular 7 项目，我在一个组件中显示了一个图片库，所有图片都在 assets/images 文件夹中。每个图像都有自己的删除按钮，我的 delete() 函数是空的，因为我不知道如何从组件中删除图像。

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

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

Answer 1

编辑：

您无法在浏览器中使用 JS 从用户计算机或服务器中删除文件。您应该向服务器发送一个 http 请求，该服务器将为您执行此操作。

但删除文件的情况很少见，尤其是对于没有用户管理和任何其他后端的应用程序（否则您不会在 angular 中询问如何执行此操作）。我认为你应该重新考虑你在做什么。

如果您只想对用户隐藏图像 'forever'，您可以使用 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>

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

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

就是这样！

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

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

How to delete an image in assets folder from my component

typescript

angular-components

angular7