Как получить доступ к изображениям локальной папки в папке проекта в Angular-cli - PullRequest
Новая
       26

Как получить доступ к изображениям локальной папки в папке проекта в Angular-cli

0 голосов
/ 17 мая 2018

Я пытаюсь загрузить изображение через base64 и загрузил изображения в локальную папку. Но после связывания его в угловую сторону, не может получить доступ к этим изображениям Поскольку я работаю над Angular-Cli, мой код компонента - Этот код предназначен для отправки строки base64 в бэкэнд после просмотра изображения из UI- 

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 в back-end, я конвертирую строку 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)

1 Ответ

0 голосов
/ 17 мая 2018
  1. Изменить URL-адрес на "./home/aartek/Desktop/images" + ...
  2. Убедитесь, что ваша папка с изображениями указана в свойстве ресурса в .angular.cli, иначе она не будет включена в сборку.
...