Added code to check to see if image data exists for the current slide. If so, it will display it. Then on each subsequent slide, it will check for image data and display if it exists. In both cases, the text of the slide will only be displayed.

src/app/components/stage-view/stage-view.component.html

@@ -4,14 +4,28 @@
       <span *ngFor="let tag of tags" [class.active]="tag.active">{{ tag.text }}</span>
     </div>
     <div class="container">
+<!-- Begin start of changed / new code -->
       <div class="slide currentSlide mat-display-3">
-        {{ currentSlides[activeSlide]?.text }}
+        <div *ngIf="currentSlides[activeSlide]?.img; else elseActiveSlideText">
+          <img src="{{currentSlides[activeSlide]?.img}}" class="active-slide-img" />
+          <div class="active-slide-img-text">{{ currentSlides[activeSlide]?.text }}</div>
+        </div>
+        <ng-template #elseActiveSlideText>
+          {{ currentSlides[activeSlide]?.text }}
+        </ng-template>
       </div>
       <div class="nextSlides">
         <div class="slide mat-display-1" [class.first]="slide.first_slide_of_tag" *ngFor="let slide of nextSlides">
-          {{ slide.text }}
+          <div *ngIf="slide.img; else elseNextSlidesText">
+            <img src="{{slide.img}}" class="next-slides-img" />
+            <div class="next-slides-text">{{ slide.text }}</div>
+          </div>
+          <ng-template #elseNextSlidesText>
+            {{ slide.text }}
+          </ng-template>
         </div>
       </div>
+<!-- End of changed / new code -->
     </div>
   </div>
   <div class="sidebar">