Angular 8 Fotorama is not showing the preview image at the bottom

Question

I am trying to use Fotorama for my angular web app. However it does not work after finished compiling. I have been referring to Fotorama official documents but it not working. The problem is that it is not showing the preview image at the bottom.

<!-- jQuery 1.8 or later, 33 KB -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<!-- Fotorama from CDNJS, 19 KB -->
<link  href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

 <div class="maincontent bg--white pt--80 pb--55">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-9">
                    <div class="wn__single__product">
                        <div class="row">
                            <div class="col-lg-4 col-12">
                                <div class="wn__fotorama__wrapper">
                                    <div class="fotorama wn__fotorama__action" data-nav="thumbs">
                                        <img src="../../assets/images/product/1.jpg" alt="">
                                        <img src="../../assets/images/product/2.jpg" alt="">
                                        <img src="../../assets/images/product/3.jpg" alt="">
                                        <img src="../../assets/images/product/4.jpg" alt="">
                                        <img src="../../assets/images/product/5.jpg" alt="">
                                        <img src="../../assets/images/product/6.jpg" alt="">
                                        <img src="../../assets/images/product/7.jpg" alt="">
                                        <img src="../../assets/images/product/8.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>

This is after compile

This is without compile, I just double click on HTML file.

Answer 1

If your images load when you open that file directly, then the paths to your images are probably wrong. Have you tried replacing "../../assets/images/product/" with "assets/images/product/"?

Assets folder must live within the application path, and not two levels above it.