vue 图片引入的方法

参考资料：https://www.jianshu.com/p/dd0fa85a196f

 

1、使用绝对路径

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

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

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