关于使用 Element UI 的 el-image 组件导致本地图片不显示的问题

1. 问题描述

当使用 在网页中加载本地图片时,会出现图片加载失败的问题,但使用标签可以正常显示。

<el-image src="../assets/bg_login.jpeg">el-image>

2. 问题分析

按下 F12 打开控制台,在 Network 中查看请求详情。

  • 使用 el-image 标签时
    关于使用 Element UI 的 el-image 组件导致本地图片不显示的问题_第1张图片
  • 使用 img 标签时
    关于使用 Element UI 的 el-image 组件导致本地图片不显示的问题_第2张图片
  • 打包后的文件夹
    关于使用 Element UI 的 el-image 组件导致本地图片不显示的问题_第3张图片
    原因】:在 element 组件上使用相对路径时 webpack 不会对路径进行处理,导致请求了一个无效的路径。

3. 解决方法

【解决方法】:将改为 (注意给 src 属性加 : )
【附】::src属性后面的字符串会被当做变量解析使用,而src属性后面的只会被当字符串使用。

你可能感兴趣的:(遇到的坑,vue.js,前端,javascript,elementui)