TheCatAPI: image 'src' tag examples

kediler kediler...

by Volkan Yılmaz

HTML

<h2>Replace 'DEMO-API-KEY' in each example with the one from the email we sent on signup</h2>

<div id="kediler">

  <div>
    <h3>Without authentication (first few demo images)</h3>
    <img src="https://api.thecatapi.com/v1/images/search?format=src&size=full">
  </div>

  <div>
    <h3>Authenticated by API-Key allowing access to all images (api_key=DEMO-API-KEY)</h3>
    <img src="https://api.thecatapi.com/v1/images/search?format=src&api_key=DEMO-API-KEY">
  </div>


  <div>
    <h3>Small size image (size=small)</h3>
    <img src="https://api.thecatapi.com/v1/images/search?format=src&size=small&api_key=DEMO-API-KEY">
  </div>

  <div>
    <h3>Just gifs (mime_types=gif)</h3>
    <img src="https://api.thecatapi.com/v1/images/search?format=src&size=full&mime_types=gif&api_key=DEMO-API-KEY">
  </div>

  <div>
    <h3>Just static images (mime_types=png,jpg)</h3>
    <img src="https://api.thecatapi.com/v1/images/search?format=src&size=full&mime_types=png,jpg&api_key=DEMO-API-KEY">
  </div>

  <div>
    <h3>Space Cats - Category (category_ids=2) - full list (https://api.thecatapi.com/v1/categories)</h3>
    <img src="https://api.thecatapi.com/v1/images/search?category_ids=2&format=src&api_key=DEMO-API-KEY">
  </div>


</div>

CSS

h2 {
  font-size: small;
  margin: 20px 0;
}
img{max-width: 120px;}

#kediler {
  width: 100%;
}

#kediler div {
  overflow: hidden;
  width: 120px;
  float: left;
  padding: 10px;
}