需求:在页面的适当位置显示图片。
在Vue中使用ElementUI的“Image图片”组件时,参考了ElementUI文档《自定义列模板》和《Image图片》,使用下面的template:
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
<el-image
style="width: 100px; height: 100px"
:src="url"
:fit="fit"></el-image>
实测时,放置位置如下:
<el-table-column prop="eximg" header-align="center" align="center" label="示例图片">
<template slot-scope="scope">
<el-image style="width: 100px; height: 80px" :src="scope.row.eximg" :fit="contain"></el-image>
</template>
</el-table-column>
测试报错如下:
vue.esm.js?efeb:591 [Vue warn]: Property or method "contain" is not defined on the instance but referenced during render.
Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
解决办法: 将“:fit=“contain””改为“fit=“contain””,即去掉冒号,将动态绑定改为固定绑定。
修改之后,又出现新的报错:
vue.esm.js?efeb:591 [Vue warn]: Unknown custom element: <el-image> - did you register the component correctly?
For recursive components, make sure to provide the "name" option.
新报错的原因:
element-ui的组件引入不全面。
新报错的解决办法:
参考博文https://cloud.tencent.com/developer/article/1429336,在\src\main.js中引入element-ui的全部组件:
import ElementUI from 'element-ui'; //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'; //element-ui的css
Vue.use(ElementUI); //使用elementUI
实测成功,页面可以正常显示图片!
注: 上面的el-image也可以替换为传统的img标签,如:<img style="width: 50px; height: 40px" :src="scope.row.eximg" />
。