Img源将prop传递给子组件Vue Js

Question

所以，我正在玩Vue Js并且目前在儿童组件上显示图像时遇到了一些麻烦，所以，我在这里看起来像：

父组件：

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

关于我们得到的子组件

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

我尝试了几种使用require和其他方法的方法...... 到目前为止，他们都没有工作过...... 有什么建议？ 另外，这是我的img路径的样子

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

Answer 1

找到一种方法来做到这一点！ ：）

基本上，在初始渲染时，在vuejs甚至有机会渲染代码之前，浏览器会看到：

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

然后，浏览器尝试加载{{url}}，并以404失败。 您需要使用新的attr语法（vue 1.0）：

详细

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

速记

<img :src="url" />