黑豹程序员-elementplus 预览图片组件 el-image

最新推荐文章于 2024-05-29 17:42:33 发布

长安紫薯

最新推荐文章于 2024-05-29 17:42:33 发布

阅读量158

点赞数 1

分类专栏：黑豹程序员 Vue front-end 大前端文章标签： vue.js 前端 ElementPlus

本文链接：https://blog.csdn.net/nutony/article/details/137131678

版权

黑豹程序员同时被 3 个专栏收录

98 篇文章 3 订阅

订阅专栏

front-end 大前端

44 篇文章 1 订阅

订阅专栏

Vue

27 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js项目中，利用el-image组件展示和设置图片源，包括定义初始图片URL和预览图片列表，适合前端开发者学习和实践。

摘要由CSDN通过智能技术生成

<template>
    <el-image
        style="width: 30px; height: 30px;border-radius: 30px;"
        :src="firstImageUrl"
        :preview-src-list="srcList"
        fit="cover"
    />
</template>

<script lang="ts" setup>
const firstImageUrl = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
]
</script>

<style scoped>

</style>