【ElementUI】一行代码解决图片预览
在ElementUI中，可以使用el-image组件轻松实现图片预览。以下是一个简单的例子：
<template>
<div>
<!-- 循环显示图片列表 -->
<el-image
v-for="(src, index) in imageUrlList"
:key="index"
:src="src"
:preview-src-list="imageUrlList"
/>
</div>
</template>
<script>
export default {
data() {
return {
// 图片URL列表
imageUrlList: [
'http://example.com/image1.jpg',
'http://example.com/image2.jpg',
'http://example.com/image3.jpg'
]
};
}
};
</script>在这个例子中，我们使用v-for指令循环显示一个图片列表，每个el-image组件都有一个预览属性preview-src-list，它被设置为整个图片URL列表。当用户点击图片时，会打开一个带有预览功能的弹窗，用户可以浏览其他图片。
评论已关闭