web-dev-qa-db-fra.com

Comment charger des images miniatures d'amorçage

J'ai commencé à utiliser Bootstrap pour un projet, et en particulier pour le composant Vignettes. Sur l'exemple exemple de vignettes dans la documentation , l'exemple de code suivant est affiché:

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

Notez l'utilisation de data-src pour remplacer l'attribut habituel src sur la balise <img>.

J'ai supposé que pour que mes vignettes fonctionnent, je devrais utiliser data-src au lieu de src pour les images, mais cela ne semble pas être le cas. J'ai seulement pu charger des images en définissant l'attribut src. Il semble que d'autres ont le même problème .

Est-ce une faute de frappe dans la documentation ou n'ai-je pas bien compris comment utiliser data-src?

htmlhtml5twitter-bootstrapimage
28
David Planella

Je crois que la seule raison pour laquelle les gars de bootstrap utilisent data-src à la place de src, c’est à cause de holder.js. Vous devez utiliser src au lieu de data-src car data-src n'est utilisé que pour la bibliothèque javascript qui génère les exemples d'images d'une certaine taille, et src est l'attribut normal pour spécifier l'emplacement d'une image (Source: W3C )

Pourquoi utilisent-ils dans la documentation data-src? Je suppose que même la syntaxe <img src="holder.js/100x200"></img> est acceptée par la bibliothèque comme dans la documentation holder.js , lorsque nous accédons à la page, une erreur 404 est générée dans l’image même lorsque l’image est affichée, car il n'y a pas de fichier dans le chemin spécifié, c'est bizarre.

Pourquoi ont-ils mis cela dans le code de la documentation? Je ne sais vraiment pas. C'est probablement une erreur. Mais je suis sûr que vous devriez utiliser src à la place de data-src dans les vignettes.

32
Pigueiras

Comment l'utiliser

Incluez holder.js dans votre code HTML:

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

Titulaire traitera ensuite toutes les images avec un attribut src spécifique, comme celui-ci:

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

La balise ci-dessus apparaîtra comme un espace réservé de 200 pixels de large et 300 pixels de haut.

Pour éviter les erreurs de la console 404, vous pouvez utiliser data-src au lieu de src.

Holder inclut également une assistance pour les thèmes, afin d'aider les espaces réservés à s'intégrer à votre mise en page. Il existe 6 thèmes par défaut: sky, Vine, lava, gray, industrial et social. Vous pouvez les utiliser comme ceci:

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

Bootstrap utilise Holder pour les vignettes dans sa documentation.

C'est assez bien expliqué sur la page Holder github . 

Incluez holder.js dans votre code HTML. Titulaire traitera ensuite toutes les images avec un attribut src spécifique ... La balise sera rendue comme un espace réservé. Pour éviter les erreurs de la console 404, vous pouvez utiliser data-src au lieu de src.

5
Dylan Kinnett

Pour que cela fonctionne, je devais appeler la fonction run () dans le support.

J'utilise require pour charger des vues de dorsale; dans ma vue, j'inclus le titulaire

var Holder = require('holderjs');

Puis à l'intérieur je peux courir

Holder.run();

Et dans mon modèle j'ai

<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>

J'espère que cela pourra aider.

2
Dave Collier

Je ne pouvais pas le comprendre non plus, dans la mesure où je le comprends, holder.js est en fait un fichier js complètement distinct pour agir en tant qu'espace réservé img de http://imsky.github.io/holder/

data-src est utilisé pour passer au javascript, le/100x200 est la dimension de l'image que vous voulez que le javascript 'holder.js' prenne pour l'image réelle. 

Je pense que l’idée est de prototyper en utilisant ceci (data-src = "holder.js/300x200") puis de le remplacer par des images dimensionnées (src = "Logo.png") par la suite.

2
Guest

Pour les futurs utilisateurs de Google cherchant à utiliser les travaux avec NPM/build, cela a fonctionné dans mon cas: 

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