前言
今天在使用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>