【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列表。当用户点击图片时，会打开一个带有预览功能的弹窗，用户可以浏览其他图片。

【ElementUI】一行代码解决图片预览

评论已关闭

推荐阅读