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

【问题标题】：Img source passed on prop to child component Vue JsImg 源将 prop 传递给子组件 Vue Js
【发布时间】：2018-11-16 20:29:18
【问题描述】：

所以，我正在玩 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"

【问题讨论】：

【解决方案1】：

只要找到一种方法就可以了！ :)

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

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

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

详细

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

速记

<img :src="url" />

【讨论】：