mysql 显示ngx下拉区中的现有图像

sr4lhrrt  于 2023-02-11  发布在  Mysql
关注(0)|答案(2)|浏览(71)

我正在使用Angular ngx-dropzone在Mysql中插入图像,并将其保存在服务器上。现在我需要在编辑模式中的Angular 组件中进行预览/编辑模式,我想在下拉框中显示现有的文件,并在上传放置区时显示相同的文件,有什么想法吗?我有图像作为一个文件,它的名称在数据库中。

dxpyg8gm

dxpyg8gm1#

您可以使用以下代码预览选定的图像

<ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let f of files" [file]="f" [removable]="true" (removed)="onRemove(f)">
</ngx-dropzone-image-preview>

如果还想显示标签

<ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let f of files" [file]="f" [removable]="true" (removed)="onRemove(f)">
        <ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
    </ngx-dropzone-image-preview>
laik7k3q

laik7k3q2#

I understand your question.I was facing the same issue.For this, you have 
to have a blob response. So if you have a url you have to convert it into a 
blob response. I have given an example below

URL: string = `https://fireflysemantics.github.io/i/service-parts- 
help/electrocardiogram-36732.png`;
files: File[] = [];

this.loadImage().subscribe(i => {
  const myFile = new File([i], this.URL, {
  type: i.type,
 });
 this.files.push(myFile)
})

loadImage(): Observable < Blob > {
 return this.http.get(this.URL, {
  responseType: "blob"
 });
}

相关问题