vue使用element-ui的el-image的src问题

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

起初:

今天在学习vue的时候,遇到了一个问题,vue学的马马虎虎,语法也不扎实。遇到的问题在这里记录下来。

问题:

是使用el-image的src链接问题。

文件结构是这样的:

el-image src,前端,vue.js,ui,javascript

 按照以往学习html的思想,在使用el-image标签的时候src我写成了src="../image/Anonymous.png"。乍一看没什么问题,但是就是显示加载失败。

 el-image src,前端,vue.js,ui,javascript

 el-image src,前端,vue.js,ui,javascript

解决:

 网上查了很多资料,很多都是用vue动态加载请求获取图片的方法,我还用不到这么复杂的。后来发现是语法的问题,改成:src="require('@/image/Anonymous.png')">就可以了。

el-image src,前端,vue.js,ui,javascript

el-image src,前端,vue.js,ui,javascript

如果有用记得点赞收藏哦!顺手也点个关注叭!

本文为原创啦,转载记得加链接哦!么么!文章来源地址https://www.toymoban.com/news/detail-535890.html

到了这里,关于vue使用element-ui的el-image的src问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

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

    当使用 el-image /el-image 在网页中加载本地图片时,会出现图片加载失败的问题,但使用 img / 标签可以正常显示。 在 element 组件上使用相对路径时 webpack 不会对路径进行处理,导致请求了一个无效的路径。 将 el-image src=\\\"../assets/bg_login.jpeg\\\"/el-image 改为 el-image :src=\\\"require(\\\'../asset

    2024年02月06日
    浏览(37)
  • 使用Element UI图片容器报错 Unknown custom element: <el-image>

    记一次项目中使用el-image组件报错问题,报错如下: 查阅资料后发现项目中使用的element版本不支持该组件,查看项目的package.json文件,发现使用的element ui版本为:2.4.6。而el-image组件是在2.8.0引入的 Elemtnt UI更新日志这里可以看到在2.8.0的时候加入了Image组件 解决办法:升级

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

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

    2024年02月12日
    浏览(43)
  • VUE element-ui 使用Screefull 页面全屏时el-select下拉菜单不显示(下拉框不显示无法选择)问题解决

    问题原因:elemrnt-ui会默认将弹出框插入至 body 元素;当设置了某个元素全屏时,会遮挡住原来的select下拉数据。

    2024年02月14日
    浏览(41)
  • vue使用element-ui,el-table不显示

    例如:新增了一个表格,按官网代码贴过来的,结果一直不显示 代码如下一模一样,其他数据正常显示,就表格不显示 其实版本库不一致导致的,贼坑,又不提示 先卸载element-ui安装一个低版本的element-ui就可以解决``

    2024年02月11日
    浏览(48)
  • Vue, Element-UI 滚动条: el-scrollbar 基本使用

    参与修改前端项目(Vue, Element-UI),添加用户体验性需求,只涉及页面UI,未涉及数据交互 为一个窗口添加滑动栏 使用el-scrollbar 框架 注意 1,默认xy都有滑动栏,添加以下代码可以隐藏x轴的滑动栏 2,style中 1). 必须去掉scoped,否则overflow-x: hidden失效 2.)外包一个div 来减少

    2024年02月15日
    浏览(33)
  • vue、element-ui使用el-tooltip判断文本是否溢出

    1.需求:需要实现文本单行显示,超出时,使用省略号,划过该文本时使用tooltip显示全部文本。需要考虑数据是由接口动态获取,只有溢出文本鼠标滑过时显示全部文本,没有溢出的则不需要。 2.实现: 第一步:首先要判断文本是否溢出 这里网上可以找到很多方法,我是用

    2024年01月21日
    浏览(33)
  • vue使用element-ui或者element-plus固定 el-header 和 el-aside

    vue使用element-ui或者element-plus固定 el-header 和 el-aside 在使用element-plus做后台管理的时候,需要固定el-header和el-aside,特此记录以下。 只需要将el-main固定高度即可。 main.vue css 将 el-main 高度后,当 el-main 内容超出固定高度后就能显示滚轮了。将滚轮样式修改一下就好了。 效果:

    2024年02月13日
    浏览(35)
  • Vue2.0+Element-ui(2.15.13)出现el-table不显示问题解决方案

    遇到的问题: Element-ui中的 el-table组件 无法正常显示; 1.安装的Vue是2.0版本; 2.安装的Element-ui是2.15.13版本 原因: 1.一个项目调用了element-ui和vant两个ui库,有冲突; 2.Element-ui是2.15.13版本依赖比较高;   解决方案: 1.npm uninstall element-ui;下载Element-ui 2.npm install element-ui@2.8.3

    2024年02月11日
    浏览(43)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包