Laravel中JSON存储的商品图片无法正常在轮播组件显示问题

我在Laravel项目中集成电商模板的商品详情页，数据库表列以JSON格式（如["1.png","2.png","4.png","5.png"]）存储商品图片，尝试用@foreach循环解析JSON渲染flexslider轮播组件，图片虽能显示但效果不符合预期。

模板代码 #

<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 -->

问题分析与解决方法 #

从效果差异来看，核心问题是动态渲染的轮播没有触发Flexslider的缩略图导航功能，以下是针对性解决步骤：

1. 重新初始化Flexslider #

原模板的Flexslider初始化代码通常在页面加载时执行，而动态生成的DOM需要重新调用初始化方法，确保缩略图导航启用：

$(window).on('load', function() {
    $('.flexslider').flexslider({
        animation: "slide",
        controlNav: "thumbnails" // 强制开启缩略图导航模式
    });
});

2. 验证JSON解析与图片路径 #

先确认JSON解析后的数据格式正确：

{{ dd(json_decode($product->additional_images)) }}

检查uploads/product_images/目录下图片是否存在、权限是否正常，确保asset()生成的路径可访问。

3. 区分缩略图与主图（若模板有需求） #

模板中data-thumb对应缩略图路径，主图用大图，若你的存储没有区分，可考虑生成缩略图或调整命名规则，例如：

@foreach(json_decode($product->additional_images) as $image)
    @php
        // 假设缩略图命名为原文件名加_thumb后缀
        $thumbImage = preg_replace('/(\.\w+)$/', '_thumb$1', $image);
    @endphp
    <li data-thumb="{{ asset('uploads/product_images/' . $thumbImage) }}">
        <img src="{{ asset('uploads/product_images/' . $image) }}" alt="商品图片">
        <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

4. 确认CSS样式加载 #

确保Flexslider的官方CSS文件已正确引入，动态生成的轮播元素需要对应样式才能正常显示缩略图导航布局。

内容的提问来源于stack exchange，提问作者Muhammad Ayaan