title: How can I use 'img src' in Vue.js?
body: <p>I have this in my Vue.js template:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;img src=&quot;/media/avatars/{{joke.avatar}}&quot; alt=&quot;&quot;&gt;
  </code></pre>
  <p>It is inside a loop that renders jokes. Other fields are rendered fine, but for the image I get this error in the console:</p>
  <blockquote>
  <ul>
  <li>src=&quot;/media/avatars/{{joke.avatar}}&quot;: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand
  instead. For example, instead of , use .</li>
  </ul>
  </blockquote>
  <p>I have also use <code>v-bind:src=&quot;...</code>, but I get <em>invalid expression</em> error.</p>
  <p>How can I fix this?</p>