如何使用js模板显示图像

How to show image with js template?

本文关键字:显示 显示图 图像 何使用 js      更新时间:2023-09-26

我想按如下方式显示图像,但似乎它不起作用。 显示数据名称和地址,但不显示图像。请参阅我的代码片段。

    var JSONObject = [{
                name: 'Nyonya',
                user_image: '~/Content/images/user1.png',
                address: '199 Grand Street New York, NY 10013, United States'
            }, {
                name: 'Mulberry Project',
                user_image: '~/Content/images/user2.png',
                address: '149 Mulberry Street New York, NY 10013, United States'
            }, {
                name: 'Sweet & Vicious',
                user_image: '~/Content/images/user3.png',
                address: '5 Spring Street New York, NY 10012, United States'
            }], template = $.trim($('#jstemplate').html());
            var $ct = $('.slider');
            $.each(JSONObject, function (i, v) {
                var temp = template.replace(/{{name}}/ig, v.name)
                                    .replace(/{{address}}/ig, v.address)
                                    .replace(/{{user_image}}/ig, v.user_image);
                $(temp).hide().appendTo($ct);
            });
 <div class="slider">
                        <script id="jstemplate" type="js/template">
                            <div class="items text-center">
                                    <div class="wow scaleIn">
                                        <img src="~/Content/images/home/logo.png" />
                                        <img src="{{user_image}}" />
                                    </div>
                                    <h2>{{name}}</h2>   
                                    <p>{{address}}</p> 
                            </div>
                        </script>
                    </div>

你能告诉我这里有什么问题或给我一些错误吗?非常感谢。

hide()导致问题。它正在从$(temp)创建 html 元素,但它隐藏了它,所以你看不到它。只是做

$(temp).appendTo($ct);