title: Passing and binding img src from props in Vue.js
body: <p>I am trying to display an image with the img tag by using a path from props for the src attribute.</p>
  
  <p>I've tried changing the path with <code>@</code>, using the whole path with <code>src</code>, adding <code>../assets/</code> in the component and only passing the file name (<code>orange.png</code>) as props.
  I always get the default broken image displayed.
  When inspecting in the browser, the path seems fine.
  When I display the image directly, I can see that the path is resolved to some different path <code>&lt;img data-v-1212d7a4="" src="/img/orange.7b71a54c.png"&gt;</code>. </p>
  
  <hr>
  
  <p><em>Edit:</em>
  Additionally I tried this post <a href="https://stackoverflow.com/questions/39906807/cant-dynamically-pass-relative-src-path-for-imgs-in-vue-js-webpack?rq=1">Can&#39;t dynamically pass relative src path for imgs in Vue.js + webpack</a> ,
  where using <code>&lt;img :src="require(picture_src)" /&gt;</code> is given as an answer.
  This leads to an error: <code>Error in render: "Error: Cannot find module '../assets/orange.png'"</code>  </p>
  
  <p>(<em>Edit2:</em>
  This answer in the end worked for me in the end as described in my answer post.)<br>
  The same error occurs with the similar webpack method using <code>let images = require.context('../assets/', false, /\.png$/)</code> in my script part, as the answer on this post <a href="https://stackoverflow.com/questions/39906807/cant-dynamically-pass-relative-src-path-for-imgs-in-vue-js-webpack?rq=1">Can&#39;t dynamically pass relative src path for imgs in Vue.js + webpack</a> .</p>
  
  <hr>
  
  <p>I am new to Vue.js, so I don't exactly know what is happening or how to search for this or it might not have anything to do with what I'm originally trying.</p>
  
  <p>I am able to display my image when I pass the path directly, like this</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img src="../assets/orange.png"/&gt;
  </code></pre>
  
  <p>Now I'd actually like to pass it to my component in the props and then, inside the component, display it reading the path from props.</p>
  
  <p>Component</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;img :src=picture_src /&gt;
      &lt;div class="pic_sub"&gt;{{pic_desc}}&lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    name: 'PictureCard',
    props: {
      picture_src: String,
      pic_desc: String
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Using the component:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;PictureCard pic_desc='some description text' picture_src='../assets/orange.png' /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import PictureCard from './components/PictureCard.vue'
  export default {
    name: 'app',
    components: {
      PictureCard
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>If it is possible, I'd love to display my from a path that is passed through the component's props.</p>
  
  <p>Otherwise I'd love to know some other solutions, work-arounds or knowledge on best practices in this case.</p>