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

这篇具有很好参考价值的文章主要介绍了关于使用 Element UI 的 el-image 组件导致本地图片不显示的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.问题描述

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

<img
          src="../../../assets/img.png"
          fit="cover"
        />

2.原因

在 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属性后面的只会被当字符串使用文章来源地址https://www.toymoban.com/news/detail-739843.html

到了这里,关于关于使用 Element UI 的 el-image 组件导致本地图片不显示的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-ui el-image :initial-index 动态调整不生效

    vue 版本 2.6.11 element-ui 2.12.0 在使用 el-image 时需要展示图片列表并查看,但我无论怎么尝试 :initial-index=\\\"index\\\"都不会生效,或者是我的使用方法不对。 目前是使用了一个动态的集合来改变:preview-src-list=“showImageList(index)” 的值,从而实现点击任意图片即打开预览,并且不影响上

    2024年01月24日
    浏览(39)
  • Element-ui中的el-image的图片预览功能(:preview-src-list)

    今天用了element-ui中的图片预览功能,但是它的图片预览功能只能预览事先定义的图片,与我的业务功能完全不符,我的业务功能是在表格上显示多张图片,当点击图片时,就预览当前点击的图片。 所以我将其修改了一下,将后端返回的图片依次渲染在页面上;功能就是当点

    2024年02月11日
    浏览(41)
  • vue3+element-plus+el-image实现点击按钮预览大图

    需求:点击某个按钮实现el-image中预览大图的效果 官方文档:以下是官方的写法,并不能达到我们的要求,官方实现的功能是点击图片达到预览大图的效果。如果你的按钮就是图片,也可以达到目前的功能 el-image-viewer组件是element官方的组件,只是文档中没有写出来,这个组

    2024年02月12日
    浏览(55)
  • 【已解决】element-ui组件嵌套太多层,导致内部el-input和el-select 等组件无法正常输入解决方案

    如果 element-ui 组件嵌套太多层,可能会导致内部的 el-input 和 el-select 等组件无法正常输入。 出现这种问题通常是由于 z-index 属性设置不正确导致的。 解决这个问题的方法是调整组件的 z-index 属性,使其不会被其他组件覆盖。以下是一个解决方法: 在上面的代码中,我们首先

    2023年04月13日
    浏览(53)
  • element UI el-tabs组件使用

    使用 Elemenet UI 框架中的 el-tabs 组件 平时在做项目时,tab切换效果几乎是必不可少的,下来整理一个最近做的一个小功能:el-tabs    说明: v-model:当前选中项 :tab-position:tab栏显示方向 @tab-click:切换tab栏的事件 JS:

    2024年02月11日
    浏览(41)
  • 【el-image图片查看时 样式穿透表格问题】

    element-ui el-image图片查看 样式混乱 解决方式 加个样式即可

    2024年02月13日
    浏览(39)
  • 【element-ui】el-form-item使用v-if导致的问题 , 增加Key

    问题:v-if在操作dom时 在根节点上进行的删减 导致 rules 判断的时候 无法取到 v-if 添加进来的prop值 解决:在 el-form-item 中添加一个属性key,key的值是唯一的(一般key和prop写一样的内容即可,因为rules里面的东西不能重复定义,所以肯定是唯一的。) 参考: 给el-form-item,添加

    2024年01月22日
    浏览(44)
  • element ui时间选择器el-date-picker关于日期禁用disabledDate的使用

    项目中很多场景都用到时间范围选择的组件:  这时候我们过多选择的是elment ui里面的el-date-picker组件,但是又嫌弃人家原始的这个丑陋   所以选择自己组装,有没有小伙伴像我这样写的呢: 发现始终不触发disabledDate,不会走进禁用的方法。寻思再三后,看官网介绍它并不是

    2024年02月08日
    浏览(47)
  • el-image实现在el-table-column中展示多张图片,且能够大图循环预览

    效果:能在表格中展示且点击需要查看的即可放大查看,多组图片放大时可左右切换    核心代码: 注意: workPhoto是图片地址的数组 通过v-for来遍历每个列表的图片地址数组,结合:src=\\\"item\\\"把每个图片展示在表格里,展示图片的大小样式用style来设定 通过:perview-src-list=\\\"getI

    2024年02月05日
    浏览(53)
  • Element-UI实现的下拉搜索树组件(el-select、el-input、el-tree组合使用)

    1、子组件封装 注意使用:正常使用 // 子组件使用 父组件调用

    2024年02月11日
    浏览(82)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包