element-ui轮播图片显示问题

element-ui中的轮播组件（Carousel 走马灯），示例中使用的是普通div，当换成图片时显示异常（获取不到图片）。

问题原因：

当在组件中循环获取图片时，就不能直接用相对路径来获取了，需要使用require从目标处导入

代码如下：

<template><div class="wrap"><div class="img-box1"><el-carousel height="300px"><el-carousel-item v-for="item in imgList" :key="item.id"><img :src="item.url" width="100%" height="300" alt=""></el-carousel-item></el-carousel></div></div>
</template><script>
export default {data() {return {imgList: [//图片路径不能写为这种形式// {//   id: '1',//   url: '../assets/test1.jpg'// },//需要使用require获取{id: '1',url: require('../assets/test1.jpg')},{id: '2',url: require('../assets/test3.jpg')},{id: '3',url: require('../assets/test4.jpg')}]}}
}
</script><style scoped>.img-box1{width: 500px;}
</style>

element-ui轮播图片显示问题相关推荐

点击轮播图片，链接跳转错误
<#if (InfoList?size > 0)><#list InfoList as newsInfo><li class="slider-li1&qu ...
element el-carousel 轮播图分页，一页显示n条
element el-carousel 轮播图分页,一页显示n条 html <el-carousel trigger="click" height="650px&q ...
vue-awesome-swiper实现轮播图片
前言最近在学习Node.js (Express.js) + Vue.js (Element UI) 全栈开发王者荣耀手机端官网和管理后台时,学习到第三章 3.7-首页顶部轮播图片(vue-swipp ...
【用HTML+CSS实现简单的轮播图片效果】
本文主要从两种方式上实现轮播图片效果方法一 ***================================================================== 本方法为渐变轮 ...
android 手机左右移动图片轮播,js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: $('.carousel-image'). ...
微信小程序Swiper组件轮播图片尺寸填坑
1.swiper图片尺寸  <view> <swiper><swiper-item><ima ...
安卓仿手机网易新闻app项目开发系列之（二）轮播图显示和RecyclerView适配器编写
一.项目简介和思路接着上周项目继续,上周主要实现了tablayout的标题栏界面和屏幕切换效果.这次咱们来实现给屏幕页面填充些网页图片数据.看看大致效果图: 可以看出界面有两部分构成,上面是轮播图, ...
游戏轮播图片-制作煽动翅膀的效果（含素材视频教程）
教程目录: 1. 小游戏展示 2. 下载游戏引擎 3. 创作一个移动的背景 4. 让阿菌煽动翅膀 5. 让阿菌模拟重力下坠 6. 让阿菌可以摸鱼 7. 编写游戏开始与结束 8. 编写 boss 剧情 ...
苹果CMSv8/v10首页幻灯轮播图片设置教程
看这个教程前请确保你的模板支持幻灯片,如果没有欢迎选购本站带幻灯的优质模板. 1,首先在-后台>视频>视频数据中找一部需要推荐显示的影片,然后点击右边的编辑就可以看到和下图一样的界面了 2 ...

element-ui轮播图片显示问题

element-ui轮播图片显示问题相关推荐

最新文章

热门文章