Nativescript Изображения из защищенного API - PullRequest
Новая
       9

Nativescript Изображения из защищенного API

0 голосов
/ 10 октября 2018

У меня есть объект "order" со свойством, представляющим собой массив URL-адресов изображений.Я пытался создать список тегов с его источником для этих URL-адресов, но проблема в том, что эти URL-адреса находятся за сервером API, и я не могу получить доступ непосредственно из тега.Я не уверен, почему я получаю FileNotFoundException, а не Forbidden, но это не имеет значения для этой проблемы.

Все мои обычные запросы к этому серверу API выполняются с опцией "withCredentials: true", API используют куки для аутентификации.

Нет ресурса API для загрузки изображения, доступ напрямую к URL.Например, если я открываю URL в своем браузере (без входа в веб-приложение), я получаю запрещенную ошибку, но если я вхожу в свое приложение в браузере и вставляю URL-адрес изображения, изображение загружается правильно.

Iя работаю с Nativescript angular.

Есть идеи, как показать этот список изображений?

ОБНОВЛЕНИЕ:

После этой проблемы и понимания, что srcсвойство тега Image не отправляет куки на сервер, я создал конечную точку 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 в консоли не отображаются изображения, карты и ошибки.

Я не уверен, что это лучший код для получения массива изображений и их показа.Если у вас есть какие-либо предложения, я мог бы бытьВы благодарны.

С уважением

...