Bootstrap缩略图列表未显示缩略图 [英] Bootstrap thumbnail list is not showing thumbnails

问题描述

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

I am using twitter bootstrap on a theme I downloaded, and my custom html in my bootstrap thumbnails list is showing but the images are not.

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

Investigating the code, shows the image tag and working image locations are there. Here is a picture of what is occurring:

我的缩略图列表的代码如下：

The code for my thumbnail list is this:

<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页面。

Lastly there are zero errors showing in the chrome inspect element, and I dont have any inline css on this page.

推荐答案

data-src 用于获取占位符bootstrap示例中的图像。只需使用 src

data-src is used to get a place holder image in the bootstrap examples. Just use src

这篇关于Bootstrap缩略图列表未显示缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！