title: Serving real images based on attachment id with wordpress REST API endpoint
body: <p>Is it possible to serve images with Wordpress Rest API endpoint based on attachment ID? </p>
  
  <p>I mean, if the following link was pasted in browser, i should get the real image instead of JSON response.
  <a href="http://demo.dev/wp-json/custom/v1/image/80" rel="nofollow noreferrer">http://demo.dev/wp-json/custom/v1/image/80</a></p>
  
  <p>I need it for REST-full Wordpress theme, based on Vue.js and Metabox.io plugin with mb REST API add-on. My metaboxes contain lots of repeatable, nested groups and they output only image ids in array.</p>
  
  <p>I added endpoint in functions.php:</p>
  
  <pre><code>add_action( 'rest_api_init', function () {
      register_rest_route( 'custom/v1', '/image/(?P&lt;id&gt;\S+)', [
          'methods' =&gt; WP_REST_Server::READABLE,
          'callback' =&gt; 'custom_get_image',
             'args' =&gt; [
              'id'
          ],
      ] );
  } );
  
  if ( !function_exists('custom_get_image') ){
      function custom_get_image($data){
          $id="";
          $src= get_template_directory_uri().'/img/placeholder.png';
          if ( isset($data['id']) ){
              $image = wp_get_attachment_image_src($data["id"], 'medium');
              if($image){
                  $src=$image[0];
              }
          }           
          return $src;
      }
  }
  </code></pre>
  
  <p>Currently, i solved the problem by creating an extra vue component, which calls the API and inserts the file url. However, i wanted to have an API endpoint, that can be added directly to img "src" or div "background-image" without extra ajax call.</p>
  
  <pre><code>&lt;template&gt;
    &lt;img :src="src"&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios';
  export default {
    props: ['id'],
    data: function() {
      return {
        src: 'http://demo.dev/wp-content/themes/vue-theme/static/img/placeholder.jpg',
      };
    },
    methods: {
      getSrc(id) {
        //var id = 83;
        var endpoint = 'http://demo.dev/wp-json/custom/v1/image/';
        var url = endpoint + id;
        axios
          .get(url)
          .then(response =&gt; {
            this.src = response.data;
          })
  
          .catch(error =&gt; {});
      },
    },
  
    mounted: function() {
      this.$nextTick(function() {
        this.getSrc();
      });
    },
  };
  &lt;/script&gt;
  </code></pre>