vue加载ElementUI的el-image图片时不能使用相对路径问题

Vue官方提供的图片控件el-image，在加载相对路径时会出现加载失败现象：

<el-image
      style="width: 22px; height: 28px"
      :src="'@/assets/images/icon/file/jpg.png'"
      fit="contain"
    >
</el-image>

文章目录

• ​​解决方案：​​

• ​​1、使用绝对路径 （不推荐）​​
• ​​2、使用import（推荐）​​
• ​​3、使用require（不推荐）​​

解决方案：

1、使用绝对路径 （不推荐）

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

2、使用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>

3、使用require（不推荐）

<el-image :src="require('@/assets/images/icon/file/jpg.png')"></el-image>

//或者

<template>
  <el-image :src="imgUrl">
</template>
<script>
export default {
  data:function(){
    return {
      imgUrl: require("@/assets/images/icon/file/jpg.png")
    }
  }
}
</script>