1. 问题描述
当使用<el-image> </el-image>
在网页中加载本地图片时,会出现图片加载失败的问题,但使用<img />
标签可以正常显示。
<el-image src="../assets/bg_login.jpeg"></el-image>
2. 问题分析
按下 F12 打开控制台,在 Network 中查看请求详情。
- 使用 el-image 标签时
- 使用 img 标签时
- 打包后的文件夹
【原因】:在 element 组件上使用相对路径时 webpack 不会对路径进行处理,导致请求了一个无效的路径。
3. 解决方法
【解决方法】:将<el-image src="../assets/bg_login.jpeg"></el-image>
改为 <el-image :src="require('../assets/bg_login.jpeg')"></el-image>
(注意给 src 属性加 : )
【附】::src
属性后面的字符串会被当做变量解析使用,而src
属性后面的只会被当字符串使用。