Image 图片

<zk-image 
   src="https://www.zenkuai.com/attachment/demo/3.jpg"
    width="200"
    height="300"
/>

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="Image图片">
		<!-- 基础用法 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" />
			<view class="image-row">
				<zk-image src="https://www.zenkuai.com/attachment/demo/3.jpg" :width="200" :height="200" />
			</view>
		</zk-theme>

		<!-- 填充模式 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="填充模式" />
			<view class="image-row">
				<view class="image-item" v-for="mode in modes" :key="mode">
					<zk-image :src="demoImage" :mode="mode" :width="200" :height="200" />
					<zk-text type="placeholder" :size="24" margin="10rpx 0 0 0" :text="mode" />
				</view>
			</view>
		</zk-theme>

		<!-- 圆形图片 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="圆形图片" />
			<view class="image-row">
				<zk-image :src="demoImage" :width="200" :height="200" round />
			</view>
		</zk-theme>

		<!-- 圆角图片 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="圆角图片" />
			<view class="image-row">
				<zk-image :src="demoImage" :width="200" :height="200" :radius="20" />
			</view>
		</zk-theme>

		<!-- 加载中提示 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="加载中提示" />
			<view class="image-row">
				<zk-image src="https://www.zenkuai.com/attachment/demo/3.jpg" :width="200" :height="200"
					loading-text="自定义提示" />
			</view>
		</zk-theme>

		<!-- 加载失败 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="加载失败" />
			<view class="image-row">
				<zk-image src="https://www.zenkuai.com/attachment/weixin1.jpg" :width="200" :height="200"
					error-text="加载失败" />
			</view>
		</zk-theme>

		<!-- 自定义背景色 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义背景色" />
			<view class="image-row">
				<zk-image :src="demoImage" :width="200" :height="200" bg-color="#f0f0f0" />
			</view>
		</zk-theme>

		<!-- 长按菜单 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="长按菜单" />
			<view class="image-row">
				<zk-image :src="demoImage" :width="200" :height="200" :show-menu-by-longpress="true" />
			</view>
		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {
				demoImage: 'https://www.zenkuai.com/attachment/demo/3.jpg',
				modes: [
					'scaleToFill',
					'aspectFit',
					'aspectFill',
					'widthFix',
					'heightFix'
				]
			}
		}
	}
</script>

<style>
	.image-row {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		/* #endif */

		/* #ifdef APP-NVUE */
		flex-direction: row;
		flex-wrap: wrap;
		/* #endif */
	}

	.image-item {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		align-items: center;
		/* #endif */

		/* #ifdef APP-NVUE */
		flex-direction: column;
		align-items: center;
		margin: 10rpx;
		/* #endif */
	}
</style>