el-image 组件 使用相对路径会加载失败的问题

前言

今天在使用ElementUI中的 el-image 组件时，为了方便起见，src 使用了相对路径，但是一直显示加载失败。如下图所示：

问题分析

查询了相关博客才发现，Vue官方提供的图片控件 el-image ，在加载相对路径时会出现加载失败现象。

解决方法

方法一：使用绝对路径

<el-image 
	:src="'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'">
	</el-image>

方法二：使用require

<el-image
    :src="require('assets/banner/banner.png')"
    fit="fill"></el-image>

方法三：使用import

<template>
  <el-image :src="imgUrl">
  </el-image>
</template>

<script>
	import jpg from '@/assets/images/icon/file/jpg.png'
	export default {
	  data:function(){
	    return {
	      imgUrl: jpg
	    }
	  }
	}
</script>