如何使用Angular-Ionic从AWS存储库下载图像

Question

我正在尝试以下操作：我需要下载图片，但是要下载图片，我需要从后端获取url。该URL来自存储图像的AWS存储库。

我的后端（由Laravel制造）可以正常工作，但是我的问题是尝试从我的棱角离子应用程序下载图像。

我的代码如下：

clinic-test.page.ts：

import {Component} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {ClinicTestService} from '../../../../providers/services/api/clinic-test.service';
import {ClinicTest} from '../../../../models/ClinicTest';

@Component({
    selector: 'app-clinic-test',
    templateUrl: './clinic-test.page.html',
    styleUrls: ['./clinic-test.page.scss'],
})
export class ClinicTestPage {
    clinicTest: ClinicTest;
    clinicTestFileUrl: string;

    constructor(private activatedRoute: ActivatedRoute,
                private clinicTestService: ClinicTestService) {
    }

    ionViewWillEnter() {
        const clinicTestId = this.activatedRoute.snapshot.paramMap.get('test-id');
        this.clinicTestService.getClinicTest(clinicTestId).subscribe(
            clinicTest => this.clinicTest = clinicTest
        );
    }

    getClinicTestFile() {
        this.clinicTestService.getClinicTestFile().subscribe(
            clinicTestFileUrl => this.clinicTestFileUrl = clinicTestFileUrl
        );
    }
}

我的getClinicTestFile（）函数按如下所示在我的[[clinic-test.service.ts] >>中调用另一个相同的函数：

getClinicTestFile() {
  const urlMock = `${this.baseUrl}/${MOCK_CLINIC_TEST_ID}/{s3_clinic_file_id}/download`;

  return this.httpClient.get(urlMock, {responseType: 'text'});
}

它总是返回相同的测试URL（'https://sghvr.s3.us-east-2.amazonaws.com/aATecub3Epkwu1AcDGVgHIcWi1SrZCW9wkYtkTJU'）。我已经在Postman上测试了该网址，可以看到图片。

在我的html代码中，我有以下内容：

<ion-content>
    <ion-grid class="ion-no-padding">
        <ion-row>
            <ion-col offset-md="3" size-md="6">
                <ion-button (click)="getClinicTestFile()">Descarga Imagen</ion-button>
            </ion-col>
        </ion-row>
        <br>
        <ion-img src="{{clinicTestFileUrl}}"></ion-img>
        <br>
        <ion-row>
            <ion-col offset-md="3" size-md="6">
                <ion-label>
                    <h1><b>Paciente: </b>{{clinicTest?.patient.user.name}} {{clinicTest?.patient.user.surname}}</h1>
                    <br>
                </ion-label>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

在上面的代码中，我试图在元素上显示图像。

好吧，当我单击下载图像元素的按钮时，它在src上正确获得了测试URL，但是在控制台上出现以下错误：

GET https://sghvr.s3.us-east-2.amazonaws.com/aATecub3Epkwu1AcDGVgHIcWi1SrZCW9wkYtkTJU 403 (Forbidden)

嗯，在这两点上我需要帮助：

为什么我的控制台上出现该错误？
• 我如何使用aws url下载图像？我一直在搜索，但没有成功。
• 很抱歉问这些简单的问题，但我还不太习惯Angular-Ionic。

欢迎任何提示！

谢谢！

我正在尝试以下操作：我需要下载图片，但是要下载图片，我需要从后端获取url。该URL来自存储图像的AWS存储库。我的后端（用...

Answer 1

why do I'm having that error on my console?