如何用js模板显示图像?

时间:2016-02-20 09:16:43

标签: javascript jquery json image

我想将图片显示如下,但似乎无效。数据名称和地址显示,但图像不显示。请参阅我的代码段。

    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>

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

1 个答案:

答案 0 :(得分:0)

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

$(temp).appendTo($ct);