引导缩略图列表未显示缩略图

Posted

技术标签:

【中文标题】引导缩略图列表未显示缩略图【英文标题】:Bootstrap thumbnail list is not showing thumbnails 【发布时间】:2013-01-29 13:01:14 【问题描述】:

我在我下载的主题上使用 twitter 引导程序,并且我的引导程序缩略图列表中的自定义 html 正在显示,但图像没有显示。

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

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

<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" >
                            <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" >
                            <h3>Naughty 90</h3>
                            <p>Toppling Goliath Brewing Company</p>
                        </div>
                    </li><li class="span3">
                        <div class="thumbnail">
                            <img data-src="noImage.gif" >
                            <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" >
                            <h3>Williams Ceilidh 90</h3>
                            <p>Williams Brothers Brewing Company</p>
                        </div>
                    </li><li class="span3">
                        <div class="thumbnail">
                            <img data-src="noImage.gif" >
                            <h3>Boscos 90 Shilling Ale</h3>
                            <p>Boscos Brewing Company</p>
                        </div>
                    </li><li class="span3">
                        <div class="thumbnail">
                            <img data-src="noImage.gif" >
                            <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" >
                            <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" >
                            <h3>I-90 India Pale Ale</h3>
                            <p>Ancient Lakes Brewing Company</p>
                        </div>
                    </li></ul>                    

            </div>

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

【问题讨论】:

而不是你的图像标签上的 data-src 尝试只是 src。 这是一个零基础的小提琴:jsfiddle.net/BZudQ 使用 'src' 确实有效,但我不知道为什么。 更新小提琴显示工作图像:jsfiddle.net/BZudQ/1 感谢工作的人......也不知道为什么。 【参考方案1】:

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

【讨论】:

在您批准太小的修改之前请仔细检查:) 为什么&lt;img class="img-thumbnail img-responsive" src="http://upload.wikimedia.org/wikipedia/sr/0/0c/Firefox-logo.png" alt="" /&gt; 可以工作,但不能像&lt;img class="img-thumbnail img-responsive" src="http://localhost/live/images/logo.png" alt="" /&gt; 这样的本地图像?图片在其他任何地方都可见!

以上是关于引导缩略图列表未显示缩略图的主要内容,如果未能解决你的问题,请参考以下文章

引导缩略图位置[重复]

更新引导缩略图网格 - ajax 请求

为啥cdrx4显示不了缩略图

如何设置 Twitter 引导缩略图的高度?

像wpf中的Powerpoint缩略图一样创建缩略图预览

PDFKit PDFThumbnailView 缩略图未居中