1. 使用原生HTML和CSS实现图片显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片显示</title>
    <style>
        img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <img src="example.jpg" alt="示例图片">
</body>
</html>

2. 使用Vue的v-bind:src指令绑定图片

<template>
    <div>
        <img :src="imageUrl" alt="绑定图片">
    </div>
</template>

<script>
export default {
    data() {
        return {
            imageUrl: 'example.jpg'
        }
    }
}
</script>

3. 使用Vue的v-for指令循环显示图片列表

<template>
    <div>
        <img v-for="(item, index) in images" :key="index" :src="item.url" alt="图片列表">
    </div>
</template>

<script>
export default {
    data() {
        return {
            images: [
                { url: 'image1.jpg' },
                { url: 'image2.jpg' },
                { url: 'image3.jpg' }
            ]
        }
    }
}
</script>

4. 使用Element UI的el-image组件展示图片

<template>
    <div>
        <el-image src="example.jpg" alt="Element UI 图片组件"></el-image>
    </div>
</template>

<script>
import { ElImage } from 'element-plus';

export default {
    components: {
        ElImage
    }
}
</script>

5. 使用Vue的v-lazy指令实现图片懒加载

<template>
    <div>
        <img v-lazy="imageUrl" alt="懒加载图片">
    </div>
</template>

<script>
import { lazyLoad } from 'vue-lazyload';

export default {
    directives: {
        lazy: lazyLoad
    },
    data() {
        return {
            imageUrl: 'example.jpg'
        }
    }
}
</script>

6. 使用Vue的v-swiper指令实现图片轮播

<template>
    <div>
        <swiper :options="swiperOptions">
            <swiper-slide v-for="(item, index) in images" :key="index">
                <img :src="item.url" alt="图片轮播">
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-swiper-component';

export default {
    components: {
        swiper,
        swiperSlide
    },
    data() {
        return {
            images: [
                { url: 'image1.jpg' },
                { url: 'image2.jpg' },
                { url: 'image3.jpg' }
            ],
            swiperOptions: {
                loop: true,
                autoplay: true
            }
        }
    }
}
</script>

在这个例子中,我们