从 LocalHost 获取数据

Question

假设我的本地 PC 上有许多学校图像，其中图像具有学校的 Campus_id 名称。但是每所学校可能有一张或多张图片。假设一所 id=20 的学校有像 20_1, 20_2, 20_3 这样的图像，而有 id=23 的学校只有像 23_1 这样的图像。我想获取这些图像并使用 Angular 和 Html 显示它。我所做的是将图像放在一个数组中并使用 Ngfor 显示它。但问题是我不知道每所学校的图像数量。

以下是如何遍历保存在 data.attributes.photos 中的所有照片，并为每张照片生成单独的幻灯片。

环境网址：

resimUrl: 'http://localhost/mebresim/'

data.attributes.photos = environment.resimUrl + data.attributes.kampus_id + '.jpg';

或者就是这样：

打字稿：

data.attributes.photos = [ "12.jpg", "12_1.jpg", "12_2.jpg" ]

HTML：

<ngb-carousel>
    <ng-template ngbSlide *ngFor="let photo of navbar.infoData.attributes.photos">
        <img class="card-img-top img-fluid w-full" [src]="photo" alt="Okul Fotoğrafı Bulunamadı">
    </ng-template>
</ngb-carousel>

如果您知道每所学校都有固定数量的图像，那么在这里获取和放入数组是有效的。但是如果我不知道学校有多少图片呢？

Answer 1

您可以尝试按数字顺序加载图片，失败后继续加载。

 //This function will try to load an image and fire callbacks on the availablity.
 //Images are automatically cached at this point (bonus)
function testImage(url) {
    var tester=new Image();
    tester.onload=imageFound;
    tester.onerror=imageNotFound;
    tester.src=url;
}

function imageFound() {
   loadNext();    //Try the next one    
}

function imageNotFound() {
   //Last image loading failed. Proceed showing images you have got.
   console.log('Last Index: ' + lastIndex - 1;);

   //showImages();    
}


function loadNext(){

   testImage('http://localhost/mebresim/' + data.attributes.kampus_id + '_' + lastIndex);

   lastIndex++;
}

//Trigger image loading
var lastIndex = 0;
loadNext();