web-dev-qa-db-ja.com

ロード方法bootstrap=サムネイル画像

プロジェクト、特にサムネイルコンポーネントにBootstrapを使用し始めました。ドキュメントの thumbnailsの例 、次のサンプルコードが表示されます。

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

data-srcタグの通常のsrc属性を置き換えるために<img>を使用していることに注意してください。

サムネイルを機能させるには、画像にsrcの代わりにdata-srcを使用する必要があると想定しましたが、そうではないようです。 src属性を定義することでしか画像をロードできませんでした。 他の人も同じ問題を抱えているようです 。

これはドキュメントの誤植ですか、それともdata-srcの使用方法を正しく理解していませんか？

htmlhtml5twitter-bootstrapimage
28
David Planella

それの使い方

含むholder.js HTML内：

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

ホルダーは、次のような特定のsrc属性を持つすべての画像を処理します。

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

上記のタグは、幅200ピクセル、高さ300ピクセルのプレースホルダーとしてレンダリングされます。

コンソール404エラーを回避するには、data-srcの代わりにsrc。

ホルダーにはテーマのサポートも含まれており、プレースホルダーがレイアウトに溶け込みやすくなっています。 6つのデフォルトテーマがあります：sky、Vine、lava、gray、industrial、およびsocial。次のように使用できます。

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

ブートストラップは、ドキュメント内のサムネイルにホルダーを使用します。

Holder githubページ で十分に説明されています。

Holder.jsをHTMLに含めます。ホルダーは特定のsrc属性を持つすべての画像を処理します...タグはプレースホルダーとしてレンダリングされます。コンソール404エラーを回避するには、srcの代わりにdata-srcを使用できます。

5
Dylan Kinnett

これを機能させるには、ホルダーで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>

お役に立てば幸いです。

2
Dave Collier

理解できない限り、holder.jsは実際には http://imsky.github.io/holder/ からimgプレースホルダーとして機能する完全に独立したjsファイルです=

data-srcはjavascriptに渡すために使用されます。/100x200は、javascript 'holder.js'が実際のimgに使用する画像の寸法です。

私は、これを使用してプロトタイプを作成し（data-src = "holder.js/300x200"）、その後サイズを変更した画像（src = "Logo.png"）に置き換えると考えています。

2
Guest

NPM /ビルドジョブで使用する方法を探している将来のGoogle社員向けに、これは私の場合はうまくいきました。

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