无法以正确的路径显示上传的图像答案

【问题标题】：Can't show uploaded image with correct path无法以正确的路径显示上传的图像
【发布时间】：2019-11-22 20:12:05
【问题描述】：

上传图片时，我想显示图片的预览及其路径（例如../assets/dist/upload/profil-sfgho91563005701768.jpg）。

模板 HTML 如下所示：

<div>
    <label class="btn btn-default">
        <input type="file" (change)="selectFile($event)">
    </label>

    <button class="btn btn-success"
            [disabled]="!selectedFiles"
            (click)="upload()">
        Upload
    </button>

    <br/>
    <img src="{{displayImage()}}" style="max-width:30px"/>
    <br/>

    {{displayImage()}}
</div>

component.ts 如下所示：

selectFile(event) {
  const file = event.target.files.item(0)

  if (file.type.match('image.*')) {
    this.selectedFiles = event.target.files;
  } else {
    alert('invalid format!');
  }
}

upload() {
  this.progress.percentage = 0;
  this.currentFileUpload = this.selectedFiles.item(0);

  this.userService.pushFileToStorage(this.currentFileUpload)
    .subscribe(event => {
      if (event.type === HttpEventType.UploadProgress) {
        this.progress.percentage = Math.round(100 * event.loaded / event.total);
      } else if (event instanceof HttpResponse) {
        console.log('File is completely uploaded!');
      }
    })

  sessionStorage.getItem("fullNameFile");

  this.currentSelectedFile = "../assets/dist/upload/" + sessionStorage.getItem("fullNameFile");
  this.selectedFiles = undefined;
}


displayImage(): String {
  this.pathImage = "../assets/dist/upload/" + sessionStorage.getItem("fullNameFile");
  return this.pathImage;
}

As seen in this screenshot，每次上传后生成的路径同步正确。

但是图片无法显示。但是当我把这个 url 放在 src (<img src="../assets/dist/upload/profil-mu1os1563004878566.jpg" style="max-width:30px"/>) 上时，效果很好。

我该如何解决这个问题？

非常感谢。

【问题讨论】：

您需要更改路径以正确的url，例如：localhost:4200/assets/dist/upload/profil-mu1os1563004878566.jpg

标签： angular angular6

【解决方案1】：

这是因为img 在上传之前找不到图片。您需要先上传图片，然后在完成后显示img。

您可以创建一个 showImg 变量，然后在订阅时将其设置为 true 并显示图像。

模板 HTML：

<div>
    <label class="btn btn-default">
        <input type="file" (change)="selectFile($event)">
    </label>

    <button class="btn btn-success"
            [disabled]="!selectedFiles"
            (click)="upload()">
        Upload
    </button>

    <div *ngIf={{showImg}}>
        <img src="{{displayImage()}}" style="max-width:30px"/>
        {{displayImage()}}
    </div>
</div>

component.ts:

showImage: boolean = false;

...

upload() {
  this.showImage = false;
  this.progress.percentage = 0;
  this.currentFileUpload = this.selectedFiles.item(0);

  this.userService.pushFileToStorage(this.currentFileUpload)
    .subscribe(event => {
      if (event.type === HttpEventType.UploadProgress) {
        this.progress.percentage = Math.round(100 * event.loaded / event.total);
      } else if (event instanceof HttpResponse) {
        console.log('File is completely uploaded!');

        this.showImage = true;

        sessionStorage.getItem("fullNameFile");
        this.currentSelectedFile = "../assets/dist/upload/" +  sessionStorage.getItem("fullNameFile");
        this.selectedFiles = undefined;
      }
    })
}

...

【讨论】：

您好@Rust 先生，非常感谢您的回复。但我需要在之后选择它并之前点击按钮upload来显示图像。

【解决方案2】：

试试看：

url: string | ArrayBuffer;

selectFile(event:any)
    {
        if (event.target.files && event.target.files[0])
        {
            var reader = new FileReader();

            reader.onload = (event: ProgressEvent) =>
            {
                this.url = (<FileReader>event.target).result;
            }
            reader.readAsDataURL(event.target.files[0]);
        }

        const file = event.target.files.item(0)

        if (file.type.match('image.*'))
        {
            this.selectedFiles = event.target.files;
        }
        else
        {
            alert('invalid format!');
        }
    }

在 html 上，尝试一下：

<img [src]="url" style="max-width:30px">

HTH。

【讨论】：