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

我正在尝试以下方法：我需要下载一个图像，但要下载它，我需要从后端获取一个url。该url来自存储图像的AWS存储库

我的后端（由Laravel制作）工作正常，但我的问题是试图从我的应用程序下载图像

我的代码如下：

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

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

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
        );
    }
}

My getClinicTestFile（）函数调用Myclinic 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（“”）。我已经在邮递员上测试了这个url，我可以看到图片

在我的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>

我需要这两点的帮助：

• 为什么我的主机上会出现这个错误
• 如何使用aws url下载图像？我一直在寻找，但没有成功

很抱歉问这些简单的问题，但我还不太习惯

欢迎任何提示

谢谢大家!

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

错误很明显，表明您无权访问该文件。如果直接访问URL，您将看到“拒绝访问”。使用您必须的访问密钥下载文件或将其公开。这取决于你的要求，但有一点是至关重要的。前端的访问密钥可供所有用户使用，这是一个安全缺陷。您需要的是使用后端。使用您的访问密钥在LARAVEL中获取图像，并将其发送回前端

要下载图像，请执行以下操作： 向链接添加

下载
属性：

<a href="link_of_the_image" target="_self" download>Download</a>



该属性将下载链接的文件，而不是导航到该文件。请参见此处的浏览器支持：
也许是原因，但我怎么能在邮递员身上看到呢？无论如何，如果您需要授权，如何显示？谢谢你的帮助！现在我在《邮差》中看到了accesskey和secretkey：我将在测试期间公开我的raws回购协议。第一个问题是，公开我可以看到的，但我如何下载它？