在laravel中，我想在滑块中显示多个产品图像，该图像以JSON格式存储在数据库中

Question

我试图在滑块中显示我的产品图像，这些图像以 JSON 格式存储在数据库表的列中，如下所示 ["1.png","2.png","4.png","5.png" ]。图像正在显示，但不符合我的预期。

我正在集成一个电子商务模板，在这个模板中，有一个产品详细信息页面。这里是

这是模板代码

                    <div class="col-md-6">
                        <div class="wrap-flexslider">
                            <div class="inner">
                                <div class="flexslider style-1 has-relative">
                                    <ul class="slides">
                                        <li data-thumb="images/shop/sh-detail/thumb-detail-01.jpg">
                                            <img src="images/shop/sh-detail/detail-01.jpg" alt="Image">
                                            <div class="flat-icon style-1">
                                                <a href="images/shop/sh-detail/detail-01.jpg" class="zoom-popup"><span class="fa fa-search-plus"></span></a>
                                            </div> 
                                        </li>
                                        <li data-thumb="images/shop/sh-detail/thumb-detail-02.jpg">
                                            <img src="images/shop/sh-detail/detail-01.jpg" alt="Image">
                                            <div class="flat-icon style-1">
                                                <a href="images/shop/sh-detail/detail-01.jpg" class="zoom-popup"><span class="fa fa-search-plus"></span></a>
                                            </div> 
                                        </li>
                                        <li data-thumb="images/shop/sh-detail/thumb-detail-03.jpg">
                                            <img src="images/shop/sh-detail/detail-01.jpg" alt="Image">
                                            <div class="flat-icon style-1">
                                                <a href="images/shop/sh-detail/detail-01.jpg" class="zoom-popup"><span class="fa fa-search-plus"></span></a>
                                            </div> 
                                        </li>
                                        <li data-thumb="images/shop/sh-detail/thumb-detail-04.jpg">
                                            <img src="images/shop/sh-detail/detail-01.jpg" alt="Image">
                                            <div class="flat-icon style-1">
                                                <a href="images/shop/sh-detail/detail-01.jpg" class="zoom-popup"><span class="fa fa-search-plus"></span></a>
                                            </div> 
                                        </li>
                                    </ul>                           
                                </div><!-- /.flexslider -->
                            </div>
                        </div>                              
                    </div><!-- /.col-md-6 -->

我试过这个

                <div class="col-md-6">
                    <div class="wrap-flexslider">
                        <div class="inner">
                            <div class="flexslider style-1 has-relative">
                                <ul class="slides">
                                    @foreach(json_decode($product->additional_images) as $image)
                                        <li data-thumb="{{ asset('uploads/product_images/' . $image) }}">
                                            <img src="{{ asset('uploads/product_images/' . $image) }}" alt="Image">
                                            <div class="flat-icon style-1">
                                                <a href="{{ asset('uploads/product_images/' . $image) }}" class="zoom-popup"><span class="fa fa-search-plus"></span></a>
                                            </div> 
                                        </li>
                                    @endforeach
                                </ul>                           
                            </div><!-- /.flexslider -->
                        </div>
                    </div>                              
                </div><!-- /.col-md-6 -->

但是得到这样的幻灯片结果

Answer 1

您能否提供预期的 HTML 和结果 HTML 进行比较？当您链接是图像时，我不知道出了什么问题。