javascript - 从 LocalHost 获取数据

Question

假设我的本地主机 PC 上有许多学校图像，其中图像的名称为学校的 Campus_id。但每所学校可能有 1 个或多个图像。假设 id=20 的学校有类似 20_1, 20_2, 20_3 的图像...和学校 id=23 , h 的图像如 23_1仅有的。我想获取这些图像并使用 Angular 和 Html 来显示它。我所做的是将图像放入数组中并使用 Ngfor 显示它。但问题是我不知道每个学校的图像数量。

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

环境 URL:

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

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

或者简单地说:

typescript :

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