title: Lazy loading images in Vue/Laravel
body: <p>I am trying to use <a href="http://appelsiini.net/projects/lazyload/" rel="nofollow noreferrer">jQuery Lazy Loading</a> in my Laravel/Vue project but I am struggling to get an image to appear in my Vue component. I have the following img block which I thought would work:</p>
  
  <pre><code>&lt;img v-if="vehicle.photo_path != null" :data-original="'/storage/vehicles/' + vehicle.photo_path" class="lazy" height="180" width="150"/&gt;
  </code></pre>
  
  <p>I did find this other question on here - <a href="https://stackoverflow.com/questions/37645243/static-image-src-in-vue-js-template">Static image src in Vue.js template</a> - however when I try that method I get this: <code>Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.</code></p>
  
  <p>So I switched back to the v-bind method but all I am getting is a white box with a grey border - no image. If I v-bind on the src attribute however I can see the image correctly.</p>
  
  <p>I know I have implemented the Lazy Loading plugin correctly as I can successfully call it elsewhere on my site (such as on a blade view), but I'm not sure where I am going wrong. Thank you.</p>