我得到了一个父组件，它向子组件发送一个数据对象，如下所示:
<child object-data=" url: 'url here', title: 'Title'"></child>
然后在我的children组件上，我通过以下操作获取对象数据:
<script>
export default {
props: [
'objectData'
]
}
</script>
我现在可以毫无问题地使用{{ objectData.title }}.
但是，当涉及到img标签中的URL时，它不会呈现图像.
我try 了以下几点:
<img :src="objectData.url"/><；——不渲染
<img v-bind:src="objectData.url"/><；——不渲染
<img v-bind:src="require(objectData.url)"/><；——抛出警告错误，因为我猜它不是路径而是对象.
<img v-bind:src="{objectData.url}"/><；——抛出错误
<img v-bind:src="{{objectData.url}}"/><；——抛出错误
当我判断dom元素时，它甚至不包含src属性.
如果我写下没有对象的URL，它就会工作.
<img v-bind:src="src/assets/images/icon.png"/>
但我希望我的URL来自父组件.
有没有办法解决这个问题？我在我的网页文件中添加了url加载程序:
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader'
}
我还try 从计算/方法功能返回objectData.url:
computed: {
getImageUrl: function() {
return objectData.url;
}
}
然后像:src=“getImageUrl”或:src=“{{getImageUrl}}”那样使用，我也不幸运.