element ui中走马灯放图片
这个是html中的下面是script中的export default {data(){return{imgList:[{url:require(’@/assets/lake.jpg’)},{url:require(’@/assets/build.jpg’)},{url:require(’@/assets/road.jpg’)},{url:require(’...
·
官方文档地址:
https://element.eleme.cn/#/zh-CN/component/carousel
require 是 commonjs 的语法。目的是根据路径引入图片。浏览器是不支持 commonjs 的。如果使用 require,需要使用 vue-cli 创建项目或者 webpack 创建项目,因为webpack会最终将图片资源转换成相对地址的。
这个是template里面中的
<template>
<el-carousel
type="card"
:interval=6000
>
<el-carousel-item v-for="(img,index) in imgList" :key="index">
<img :src="img.url" width="100%" height="100%">
</el-carousel-item>
</el-carousel>
</template>
下面是script中的
export default {
data(){
return{
imgList:[
{
url:require('@/assets/lake.jpg') //url: '../assets/lake.jpg'
},
{
url:require('@/assets/build.jpg') //url: '../assets/build.jpg'
},
{
url:require('@/assets/road.jpg') //url: '../assets/road.jpg'
},
{
url:require('@/assets/sea.jpg') //url: '../assets/sea.jpg'
}
]
}
}
}
注意,如果样式很乱,和官网上的不一样。可能是没有引入elementui 的 css 文件。
@import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");
或者如果本地下载了elementui的资源的话,可以直接写本地的相对地址。
如果有问题,欢迎评论。我看到就会及时解答的
更多推荐



所有评论(0)