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

12

我在使用下载的主题上使用Twitter Bootstrap,我的自定义HTML在Bootstrap缩略图列表中显示,但图片却没有显示。

通过调查代码,发现图像标签和工作图像位置都存在。下面是出现情况的图片:

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。


2
请在您的图像标签上使用src而不是data-src。 - Billy Moat
这是一个基础的 JSFiddle:http://jsfiddle.net/BZudQ/ 使用 'src' 是有效的,但我不确定为什么。 - isherwood
1
更新的代码片段展示了一个可用的图片:http://jsfiddle.net/BZudQ/1/ - isherwood
谢谢,伙计们,这个方法奏效了……也不太确定为什么。 - Mike
1个回答

24

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


请在批准较小的编辑之前仔细检查 :) - bonCodigo
2
为什么<img class="img-thumbnail img-responsive" src="http://upload.wikimedia.org/wikipedia/sr/0/0c/Firefox-logo.png" alt="" />可以工作,但本地图片如<img class="img-thumbnail img-responsive" src="http://localhost/live/images/logo.png" alt="" />却不行?该图片在其他地方可见! - BentCoder

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接