如何加載引導縮略圖圖像

Question

我已經開始為項目使用Bootstrap，特別是Thumbnails組件。 在文檔的縮略圖示例中 ，顯示以下示例代碼：

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
    </a>
  </li>
  ...
</ul>

注意使用data-src替換<img>標記上通常的src屬性。

我假設為了讓我的縮略圖工作，我應該使用data-src而不是src來處理圖像，但事實並非如此。 我只能通過定義src屬性來加載圖像。 似乎其他人也有同樣的問題 。

這是文檔中的拼寫錯誤，還是我不能正確理解如何使用data-src ？

Answer 1

我相信為什么bootstrap人使用data-src而不是src的唯一原因是因為holder.js 。 您應該使用src而不是data-src因為data-src僅用於生成特定大小的示例圖像的javascript庫，而src是用於指定圖像位置的常規屬性（來源： W3C ）

他們為什么在文檔data-src ？ 我想即使語法<img src="holder.js/100x200"></img>也被庫接受，因為它在holder.js文檔中 ，當我們訪問頁面時它會拋出404錯誤。圖像即使在圖像顯示時也是如此，因為指定路徑中沒有任何文件，這很奇怪。

他們為什么把它放在文檔代碼中？ 我真的不知道。 可能這是一個錯誤。 但我相信你應該在縮略圖中使用src而不是data-src 。

Answer 2

如何使用它

在HTML中包含holder.js ：

<script src="holder.js"></script>

然后，Holder將處理具有特定src屬性的所有圖像，如下所示：

<img src="holder.js/200x300">

上面的標記將呈現為200像素寬和300像素高的占位符。

要避免控制台404錯誤，可以使用data-src而不是src 。

Holder還包括對主題的支持，以幫助占位符融入您的布局。 有6個默認主題： sky ， vine ， lava ， gray ， industrial和social 。 您可以像這樣使用它們：

<img src="holder.js/200x300/industrial">

Answer 3

Bootstrap在其文檔中使用Holder作為縮略圖。

在Holder github頁面上很好地解釋了它。

在HTML中包含holder.js。 然后，Holder將處理具有特定src屬性的所有圖像...標記將呈現為占位符。 要避免控制台404錯誤，可以使用data-src而不是src。

Answer 4

我無法弄清楚，據我所知，holder.js實際上是一個完全獨立的js文件，可以作為來自http://imsky.github.io/holder/的img占位符。

data-src用於傳遞給javascript，/ 100x200是你希望javascript'holder.js'占用真實img的圖片的維度。

我認為這個想法是使用這個原型（data-src =“holder.js / 300x200”），然后用大小的圖片（src =“Logo.png”）替換它。

Answer 5

為了讓我能夠使用它，我不得不在holder中調用run（）函數。

我使用require來加載骨干視圖，在我的視圖中我包括持有者

var Holder = require('holderjs');

然后在內部渲染我可以運行

Holder.run();

在我的模板中，我有

<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img data-src="holder.js/200x200/text:hello world">
  <div class="caption">
    <h3>Thumbnail label</h3>
    <p>...</p>
    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  </div>
</div>

希望有所幫助。

Answer 6

對於尋找如何使用NPM /構建作業的未來Google員工，這在我的案例中有效：

window.Holder = require('holderjs').default;