所以,我正在玩 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"
最佳答案
只要找到一个方法就可以了! :)
基本上,在初始渲染时,在 vuejs 有机会渲染你的代码之前,浏览器会看到:
<img src="{{ url }}" />
然后浏览器尝试加载 {{ url }} 并失败并显示 404。 您需要使用新的 attr 语法(vue 1.0):
详细
<img v-bind:src="url" />
速记
<img :src="url" />
关于image - Img 源将 prop 传递给子组件 Vue Js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50732500/