Bootstrap

在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标签,如:<img style="width: 50px; height: 40px" :src="scope.row.eximg" />

;