Question

我正在尝试通过base64上传图片并将图片上传到本地的文件夹中。但是在角度方面将其绑定后，无法访问这些图像。我正在开发Angular-cli，我的组件代码是 - 此代码用于在从UI-

浏览图像后在后端发送base64字符串

base64:any;
url:any;
files : FileList; 
onSelectFile(event:any){
  console.log("onSelectFile",event);
  this.files = event.target.files;  
  console.log(this.files,"this.files");
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();
    this.currentFileUpload = this.files.item(0);
    reader.readAsDataURL(event.target.files[0])
     reader.onload = (event:any) => {
      this.base64 = event.target.result;
      console.log(this.base64, this.url,"this.url......");
     }

  }

因为我在后端使用restful webservice所以我将base64字符串转换为字节数组并将图像存储在本地文件夹中。作为回应，我得到了图像的名称。以下是回复代码 -

getDataById(profileId: any) {     
    this.user.getDataById(profileId).subscribe((response: any) => {
      this.data = response;
     this.url ="/home/aartek/Desktop/images"+this.data.profileImage;
     console.log(this.url);
    })
  }

我的HTML代码是 -

<img [src]="url" height="150" width="150" class="img-circle mt20 ml-20">

在这个HTML代码中，我试图从上面在getDataById函数中给出的本地文件夹路径访问图像。

我收到此错误： -

http://localhost:4200/home/aartek/Desktop/imagesMoon_merged_small.jpg 404 (Not Found)

Answer 1

将网址更改为“./home/aartek/Desktop/images”+ ...
确保带有图片的文件夹列在.angular.cli的资产属性中，否则，它将不会包含在构建中。

如何访问Angular-cli中项目文件夹中本地文件夹的图像

1 个答案: