如何在模态中动态传递图像

Question

我有一个动态显示产品数据的模式。我设法通过 Jquery:

使它正常工作

$(document).on('click', '.show-modal', function() {
    $('#show').modal('show');
    $('#i').text($(this).data('id'));
    $('#ti').text($(this).data('name'));
    $('#by').text($(this).data('description'));
    $('#pr').text($(this).data('price'));
    // $('#im').text($(this).data('image'));

    $('#image').html($(this).data('image') );
    $('.modal-title').text('Show Post');
});

唯一的问题是我无法通过将#image id 传递到视图中来传递图像。它看起来像这样：

  <img class="first_img" src=" " alt=""/>

如果我传入 src=""，我会看到图像 URL 但没有图像显示。

模态激活按钮如下所示：

<a href="#" class="show-modal btn btn-info btn-sm"  data-id="{{$product->id}}"
                    data-name="{{$product->name}}" data-description="{{$product->description}}" data-price="{{$product->price}}"

                    data-image="{{ asset('storage/'.$product->images->first()->full) }}"  >
                    <i class="fa fa-eye"></i>
 </a>

$product->id、$product->name 等所有文本数据都可以动态传递。唯一的问题我不知道如何动态传递图像。

这里是模态的HTML：

<div class="modal fade" title="modal" id="show" tabindex="-1" role="dialog" aria-labelledby="quickview" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
        <button type="button" class="close btn" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <div class="modal-body">
            <div class="quickview_body">
                <div class="container">
                    <div class="row">
                        <div class="col-12 col-lg-5">
                            <div class="quickview_pro_img">


                                <img class="first_img" src="" id="image" alt=""/>

                                <img class="hover_img" src="{{ asset('storage/'.$product->images->random()->full) }}" alt="">
                                <!-- Product Badge -->
                                <div class="product_badge">
                                    <span class="badge-new">New</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-7">
                            <div class="quickview_pro_des">
                                <h4 class="data"></h4>
                                <b id="ti"/>


                                <div class="top_seller_product_rating mb-15">
                                    <i class="fa fa-star" aria-hidden="true"></i>
                                    <i class="fa fa-star" aria-hidden="true"></i>
                                    <i class="fa fa-star" aria-hidden="true"></i>
                                    <i class="fa fa-star" aria-hidden="true"></i>
                                    <i class="fa fa-star" aria-hidden="true"></i>
                                </div>
                                <h5 class="price">{{config('settings.currency_symbol')}} <b id="pr"/></span></h5>
                                {{--description--}}
                                <p><b id="by"/></p>

                                <a href="{{ route('product.show', $product->name) }}">View Full Product Details</a>
                            </div>
                            <!-- Add to Cart Form -->
                            <form class="cart" method="post">

                                <button type="submit" name="addtocart" value="5" class="cart-submit">Add to
                                    cart</button>
                                <a href="" type="" value="5" class="cart-submit">Product Details</a>

                                <!-- Wishlist -->
                                <div class="modal_pro_wishlist">
                                    <a href="wishlist.html"><i class="icofont-heart"></i></a>
                                </div>
                                <!-- Compare -->
                                <div class="modal_pro_compare">
                                    <a href="compare.html"><i class="icofont-exchange"></i></a>
                                </div>
                            </form>
                            <!-- Share -->
                            <div class="share_wf mt-30">
                                <p>Share with friends</p>
                                <div class="_icon">
                                    <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                                    <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                                    <a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
                                    <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
                                    <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                                    <a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

如何做到这一点？

Answer 1

我 99% 确定您传递的信息不正确。

这个值是多少：asset('storage/'.$product->images->first()->full)

很可能是文件路径。如果是这样，而不是使用

$('#image').html($(this).data('image') );

使用

$('#image').attr("src",$(this).data('image'));

如果 asset('storage/'.$product->images->first()->full) returns 类似于 <img src="pathToImage.jpg"> 那么您的代码应该可以工作。

此外，请注意，如果您多次使用 $(this)，请将其存储在一个变量中，以便在您调用它时可以更快地访问它。您将减少每次 jQuery 将 this 转换为 jQuery 对象的开销。

类似

$(document).on('click', '.show-modal', function() {
    var t = $(this);
    $('#show').modal('show');
    $('#i').text(t.data('id'));
    $('#ti').text(t.data('name'));
    $('#by').text(t.data('description'));
    $('#pr').text(t.data('price'));

    $('#image').attr("src",$(this).data('image'));
    $('.modal-title').text('Show Post');
});

如何在模态中动态传递图像

How to pass image dynamically in modal

jquery

modal-dialog

laravel