CODEWITHSUNDEEP
imagevue.jscomponentsreact-props
Pedro Sturmer
Pedro Sturmer

Reputation: 594

Img source passed on prop to child component Vue Js

So, i'm playing around with Vue Js and currently having some trouble on displaying an image on a child component, so, here i'ts what look like:

Parent component:

<list>
  <post name="post 1" image="somePath"/>
  <post name="post 2" image="somePath"/>
</list>

on the child component we got

<post>
 <p> {{name}} </p>
 <img src={{somePath}} />
</post>

I tried several ways with require, and other methods... None of them have worked so far... Any suggestions? Also, here is how my img path looks like 

"@/assets/web/mock/Phonebeats.png"

Upvotes: 4

Views: 3790

Answers (1)

Pedro Sturmer
Pedro Sturmer

Reputation: 594

Just find out a way to do it! :)

Basically, on initial rendering, before vuejs got a chance to even render your code, the browser sees this:

<img src="{{ url }}" />

The browser then tries to load {{ url }} and fails with 404. You need to use the new attr syntax (vue 1.0):

verbose

<img v-bind:src="url" />

shorthand

<img :src="url" />

Upvotes: 6

Related Questions