受保护API的本机脚本图像

Question

我有一个对象“ order”，其属性是图像网址数组。 我试图用他的URL来源创建标签列表，但问题是这些URL位于API服务器后面，我无法直接从标签访问。 我不确定为什么会收到FileNotFoundException而不是Forbidden，但对于此问题并不重要。

我对这个api服务器的所有正常请求都是通过选项“ withCredentials：true”完成的，该api使用cookie进行身份验证。

没有可下载图像的api资源，直接访问url。 例如，如果我用浏览器打开URL（未在Web应用程序中登录），则会收到一个禁止的错误，但如果我在浏览器中登录到我的应用程序并粘贴图像URL，则图像会正确加载。

我正在使用Nativescript angular。

知道如何显示此图像列表吗？

更新：

遇到此问题并了解Image标记的src属性不会将cookie发送到服务器后，我创建了一个API端点来像正常的API调用一样接收图像。

这是我的角度服务：

public async getPhoto(orderId: number, photoName: string) {
    return await nsHttp.getImage(this.config.API_URL + `/api/tablet/photos/${orderId}/${photoName}`);
}

这是我加载所有数据的代码：

async loadData(id: number, fromSketch: boolean = false) {
        this.order = await this.orderService.getOrderById(id);

        for (let index = 0; index < this.order.photoNames.length; index++) {
            this.imgTemp = await this.orderService.getPhoto(this.order.orderId, this.order.photoNames[index].photoName);
            this.imagesJPG.push(this.imgTemp);
        }
        console.log('IMAGES: ', this.imagesJPG);
}

这是演示代码：

<ScrollView orientation="vertical" [visibility]="selectedPageItemIndex === 2 ? 'visible' : 'collapse'">
        <StackLayout>
            <CardView margin="10" elevation="5" radius="1" *ngFor="let photo of imagePhotos; let i = index">
                <Image [src]="imagesJPG[i]"></Image>
            </CardView>
        </StackLayout>
</ScrollView>

如果我尝试仅显示一张图像，例如imagesJPG [0]，则该图像可以正确显示，但是在ngFor循环中，没有图像，没有cardview，并且控制台中没有错误。

我不确定这是否是接收图像数组并显示它们的最佳代码，如果您有任何建议，我将不胜感激。

问候