在Vue中使用ElementUI的“Image图片”组件时图片无法显示问题

需求：在页面的适当位置显示图片。
在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标签，如：。