1.问题描述
当使用<el-image> </el-image>
在网页中加载本地图片时,会出现图片加载失败的问题,但使用<img />
标签可以正常显示。
<img
src="../../../assets/img.png"
fit="cover"
/>
2.原因
在 element 组件上使用相对路径时 webpack 不会对路径进行处理,导致请求了一个无效的路径。文章来源:https://www.toymoban.com/news/detail-739843.html
3.解决
将<el-image src="../assets/bg_login.jpeg"></el-image>
改为 <el-image :src="require('../assets/bg_login.jpeg')"></el-image>
(注意给 src 属性加 : )
【附】::src属性后面的字符串会被当做变量解析使用,而src属性后面的只会被当字符串使用文章来源地址https://www.toymoban.com/news/detail-739843.html
到了这里,关于关于使用 Element UI 的 el-image 组件导致本地图片不显示的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!