28

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

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

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

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

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

4

6 に答える 6

32

ブートストラップの人がdata-src代わりに使用している唯一の理由はsrc、それが理由だと思いますholder.js。srcの代わりに使用する必要があります。data-srcこれdata-srcは、特定のサイズのサンプル画像を生成するjavascriptライブラリにのみ使用され、画像srcの場所を指定するための通常の属性です（出典：W3C） 。

なぜ彼らはドキュメントで使用しているのdata-srcですか？構文でさえ、holder.jsのドキュメント<img src="holder.js/100x200"></img>にあるようにライブラリで受け入れられていると思います。ページにアクセスすると、画像が表示されている場合でも、画像に404エラーがスローされます。これは、指定されたパス、それが奇妙なこと。

なぜ彼らはそれをドキュメントコードに入れるのですか？本当にわかりません。おそらくそれは間違いです。ただし、サムネイルではsrc代わりに使用する必要があると確信しています。data-src

于 2013-03-26T22:35:02.653 に答える
23

それの使い方

holder.jsHTMLに含める：

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

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

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

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

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

ホルダーには、プレースホルダーがレイアウトに溶け込むのに役立つテーマのサポートも含まれています。デフォルトのテーマは、、、、、、、、およびskyのvine6つlavaです。次のように使用できます。grayindustrialsocial

<img src="holder.js/200x300/industrial">
于 2013-07-17T07:21:01.467 に答える
5

Bootstrapは、ドキュメントのサムネイルにホルダーを使用しています。

これは、Holdergithubページでかなりよく説明されています。

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

于 2013-08-19T19:42:24.543 に答える
2

私が理解している限り、それも理解できませんでした。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"）に置き換えるというアイデアだと思います。

于 2013-06-25T06:53:40.450 に答える
2

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

お役に立てば幸いです。

于 2014-01-09T22:04:28.460 に答える
0

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

window.Holder = require('holderjs').default;
于 2018-01-20T17:46:52.613 に答える