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>
在这个例子中,我们