Element-UI中走马灯图片无法显示的问题

最新推荐文章于 2024-07-15 18:42:28 发布
最新推荐文章于 2024-07-15 18:42:28 发布
阅读量2.8k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44656600/article/details/103100968
版权

Element-UI中走马灯图片无法显示的问题

废话不多说代码奉上:这里说一下height的大小问题,我放的图片是3200*1250的
看了其他帖子上试了很多都不行,后来发现可能就是图片大小的原因

然后我直接在浏览器后台找到了我图片div的位置
在这里插入图片描述
请注意
在这里插入图片描述
下面是绑定图片地址
在这里插入图片描述
1250-3200是我的图片的大小
this.screenWidth获取你视口的大小
在这里插入图片描述
找到图片父级标签的class类名,然后 然后 然后width和图片的width都设置100%
你就能看到一张完整的图片啦,还有随着浏览器比例缩放

第一次发,有错误的地方请指正哈,嘻嘻嘻嘻嘻

A.cm
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于Vue使用element-ui中走马灯图片无法显示的问题
m0_51137496的博客
03-12 2899
上代码 <template> <div class="img-box"> <el-carousel :interval="4000" type="card" height="600px" width="100%"> <el-carousel-item v-for="item in imgList" :key="item.id"> <img :src="item.url" height="360px
【elementui】走马灯自适应图片高度宽度 走马灯图片显示不全
OG
01-21 5931
场景：走马灯里有宽屏相片和竖屏相片共存时，超出走马灯设置的宽高后相片部分会被裁减，但我们希望无论什么分辨率的相片都能显示完全 页面代码： <template> <el-carousel arrow="always" indicator-position="outside" :interval="2000" style="width:400px" height="300px"> <el-carousel-item v-for="item in imgs" :ke
使用element-UI的走马灯时，图片无法显示的问题
weixin_44153357的博客
02-25 7261
博主在初次使用elementUI的走马灯时，发现循环渲染时，dom和src都能拿到，图片就怎么都加载不了，经过N++次的试验后中终于发现要在data中按需引入url 比如[{url:require(…/asset/carousel1.jpg)}],然后就没有问题了 ...
Element-UI 轮播图（走马灯）指示器设为图片
最新发布
m0_46796399的博客
07-15 315
通过dom + 样式操作，将轮播图（走马灯）的指示器，设置为图片效果
Vue.js 使用element-ui 做走马灯，图片无法显示的解决方法
m0_61399037的博客
09-23 1672
Vue的export中的data中的路径只会被当做普通的字符串，因此无法获取图片 data () { return { carousels: [ "../assets/img/carousel_1.png", "../assets/img/carousel_2.png", "../assets/img/carousel_3.png", "../assets/img/carousel_4.png" ] }
viewer与 iview Carousel（走马灯） 结合使用，图片无法显示
weixin_30566149的博客
07-26 3820
问题原因：iviewCarousel (走马灯)在加载是如果没有图片 它没有高度。之后给src赋值，图片无法显示，拖动一下浏览器宽或搞它就会显示。 走马灯解决这个问题方法：1在Carousel或其父组件上使用v-if；2修改iview源码。然而，使用v-if后会导致viewer 组件无法显示图片。 实际业务代码： <Tab-Pane label="草本...
解决Vue的项目使用Element ui 走马灯无法实现的问题
10-15
解决 Vue 项目中使用 Element UI 走马灯无法实现的问题，关键在于理解 webpack 的模块解析机制和 Element UI 走马灯组件的属性。通过正确地引用图片资源并动态调整走马灯高度，可以实现一个既美观又功能完善的走马灯...
版本2.4 element-ui 离线中文文档api
01-05
4. **数据展示组件**：Table（表格）、Carousel（走马灯）、Collapse（折叠面板）、Tree（树形结构）、Avatar（头像）等，用于组织和展示数据。 5. **导航组件**：Menu（菜单）、Breadcrumb（面包屑）、Pagination...
element-ui离线
01-03
6. Carousel（走马灯）和 Slider（滑块）：用于展示图片或内容的滚动效果。 7. Menu、Dropdown 和 Breadcrumb：导航组件，帮助用户在应用中进行导航。 8. Select、Checkbox 和 Radio：选择和选项组，用于收集用户...
Element Carousel 走马灯的具体实现
10-15
走马灯是网页设计中常见的一种交互效果，它可以实现图片或内容的自动轮播。Element UI 是一个基于 Vue.js 的前端框架，其中的 Carousel 组件就是用来实现走马灯效果的。在本文中，我们将深入探讨如何使用 Element UI...
element-ui-2.15.5.zip
09-09
14. **其他组件**：如 Progress 进度条、Carousel 走马灯、Collapse 折叠面板等。 此外，Element UI 还具有以下特点： - **响应式**：所有的组件都考虑了不同屏幕尺寸的适配，确保在移动设备上也有良好的表现。 - *...
ElementUI v-for嵌套使用走马灯标签导致图片覆盖显示错误解决方法
weixin_44131922的博客
06-14 990
解决的总体思路 直接将包含走马灯的内容单独抽为一个页面VUE组件，独立出来，成为循环一层 例如 <ElCol :span="8" :key="index" v-else-if="item.lmType == '0'" style="padding:5px;"> <!-- 图片组件，被抽出来的单独页面 --> <picCard :item=item></picCard> </ElCol> 新页面 picCard中 <el-card :coll
基于element-ui走马灯如何实现图片自适应 长度和高度 自适应屏幕大小 没有空隙
热门推荐
juneoer的博客
11-18 1万+
最近写用vue2.0写一个项目，用到了走马灯效果，由于项目赶时间，想偷下懒，第一次引用了element组件(纯JS也可以写的出来，赶时间嘛，懂得。。。。)，结果用了发现一个问题，element的组件（Carousel） 走马灯，高度是固定的，页面缩小会有空隙。网上查了一大堆资料，都说的不全面，要么报错，要么根本无法实现。浪费了大半天时间，还不如JS写的快，既然碰到了，还是想解决掉。。。。。。其实官...
使用element-puls Carousel走马灯(轮播图)第一张不显示的问题
xiezuoyuyyds的博客
08-28 2322
使用element-puls Carousel走马灯(轮播图)第一张不显示的问题。
element-plus 之el-carousel 走马灯 加载图片刚进入的时候为什么数据显示不对？
weixin_43136717的博客
12-08 870
element-plus el-carousel走马灯首次进入数据不正确
vue项目，使用element-ui中的走马灯，但图片加载不出来的问题
weixin_56554735的博客
04-09 486
原因：vue项目中，在export中的data中的路径只会被当做普通的字符串，因此无法获取图片。解决措施：在数组里面写成require( ' 图片地址 ' )
vue.js+elementUI跑马灯放置图片,实现轮播效果,图片路径在当前目录下的img中
m0_71912711的博客
06-10 1323
vue.js+elementUI跑马灯放置图片,实现轮播效果,图片路径在当前目录下的img中
关于elemen-ui Carousel走马灯图片不显示的问题
qq_42407405的博客
11-20 3518
在用elemen-ui Carousel 写轮播图的时候，发现动态加载图片不显示，爬坑解决办法： 用require引入图片 <el-carousel :interval="3000" arrow="never" height="350px"> <el-carousel-item v-for="(item, index) in ca...
element-plus/element-ui走马灯配置图片
01-21
以下是使用Element Plus/Element UI走马灯配置图片的示例： 1. 使用CSS样式设置图片自适应： ```html .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; } .img { /* 设置图片宽度和浏览器宽度...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值