Bootstrap缩略图列表未显示缩略图

时间:2013-02-13 20:44:57

标签: html twitter-bootstrap thumbnails image

我在我下载的主题上使用twitter bootstrap,我的自举缩略图列表中的自定义html正在显示,但图像不是。

调查代码,显示图像标记和工作图像位置。这是正在发生的事情的图片:

enter image description here

我的缩略图列表的代码是:

<div class="span9 space"><ul class="thumbnails"><li class="span3">
                        <div class="thumbnail">
                            <img data-src="http://s3.amazonaws.com/brewerydbapi/beer/YAKFea/upload_1CxY2l-medium.png" alt="">
                            <h3>90 Shilling</h3>
                            <p>Odell Brewing Company</p>
                        </div>
                    </li><li class="span3">
                        <div class="thumbnail">
                            <img data-src="http://s3.amazonaws.com/brewerydbapi/beer/oeGSxs/upload_FiPLQC-medium.png" alt="">
                            <h3>Naughty 90</h3>
                            <p>Toppling Goliath Brewing Company</p>
                        </div>
                    </li><li class="span3">
                        <div class="thumbnail">
                            <img data-src="noImage.gif" alt="">
                            <h3>90-Shilling Scotch Ale</h3>
                            <p>Taps Fish House & Brewery</p>
                        </div>
                    </li><li class="span3">
                        <div class="thumbnail">
                            <img data-src="noImage.gif" alt="">
                            <h3>Williams Ceilidh 90</h3>
                            <p>Williams Brothers Brewing Company</p>
                        </div>
                    </li><li class="span3">
                        <div class="thumbnail">
                            <img data-src="noImage.gif" alt="">
                            <h3>Boscos 90 Shilling Ale</h3>
                            <p>Boscos Brewing Company</p>
                        </div>
                    </li><li class="span3">
                        <div class="thumbnail">
                            <img data-src="noImage.gif" alt="">
                            <h3>Dundee Export 90 Scotch Ale</h3>
                            <p>Dundee Brewing Co.</p>
                        </div>
                    </li><li class="span3">
                        <div class="thumbnail">
                            <img data-src="https://s3.amazonaws.com/brewerydbapi/beer/qqTzHb/upload_mGIvsJ-medium.png" alt="">
                            <h3>90 Minute IPA</h3>
                            <p>Dogfish Head Craft Brewery</p>
                        </div>
                    </li><li class="span3">
                        <div class="thumbnail">
                            <img data-src="http://s3.amazonaws.com/brewerydbapi/beer/jdQySZ/upload_jbcADO-medium.png" alt="">
                            <h3>I-90 India Pale Ale</h3>
                            <p>Ancient Lakes Brewing Company</p>
                        </div>
                    </li></ul>                    

            </div>

最后在chrome检查元素中显示零错误,并且我在此页面上没有任何内联css。

1 个答案:

答案 0 :(得分:24)

data-src用于在引导示例中获取占位符图像。只需使用src

即可