2013-02-13 100 views
11

我对我下载的主题使用了twitter引导程序,并且我的自举缩略图列表中显示了自定义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试试看src。 – 2013-02-13 20:53:40

+0

这里是一个地面零小提琴:http://jsfiddle.net/BZudQ/使用'src'确实有效,但我不知道为什么。 – isherwood 2013-02-13 20:56:49

+1

更新小提琴显示工作形象:http://jsfiddle.net/BZudQ/1/ – isherwood 2013-02-13 20:59:20

回答

24

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

+0

在批准太小编辑之前,请仔细检查:) – bonCodigo 2014-02-27 16:01:12

+1

令人难以置信,谢谢! ;) – Roman 2014-11-17 10:43:03

+1

为什么''有效,但不是像''这样的本地图像?图像在其他地方可见! – BentCoder 2014-11-25 23:01:33