# wolf-image

**Repository Path**: liujibin-plus/wolf-image

## Basic Information

- **Project Name**: wolf-image
- **Description**: 无图片，或者图片加载失败，或者图片较大，等待加载的时候，会显示占位图。不会出现图片空白的情况。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-02
- **Last Updated**: 2025-04-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 使用方法
```
import WolfImage from '@/components/wolf-image/wolf-image.vue';
components:{
	WolfImage
},
```
```
<WolfImage 
	:src="'https://ceshi2.sdykt.com.cn/etonmallio/dj-image/2025/03/28/67e6583e28bab1.25172453.png'"
	:width="260"
	:height="260"
	:radiusTopLeft="16"
	:radiusTopRight="16"
	:radiusBottomLeft="16"
	:radiusBottomRight="16"
	:mWidth="120"
	:mHeight="120"
	:emptyBgColor="'#F5f5f5'"
	:emptyImgUrl="''"
	:needShowBigImg="true"
	:windowHeight="windowHeight"
/>
```
# 参数
属性    | 类型| 说明 | 默认值
-------- | ----- | ------------ | ------
src | String | 图片路径 | 必填，可填空字符串
width | Number | 图片宽度 | 必填，默认0，单位rpx 
height | Number | 图片高度 | 必填，默认0，单位rpx 
mWidth | Number | 占位/缺省图 图片宽度 | 必填，默认0，单位rpx 
mHeight | Number | 占位/缺省图 图片高度 | 必填，默认0，单位rpx 
radiusTopLeft | Number | 圆角 左上 | 默认0，单位rpx 
radiusTopRight | Number | 圆角 右上 | 默认0，单位rpx
radiusBottomLeft | Number | 圆角 左下 | 默认0，单位rpx
radiusBottomRight | Number | 圆角 右下 | 默认0，单位rpx
emptyBgColor | String | 无图片/加载失败时占位的背景色 | 默认白色
emptyImgUrl | String | 占位/缺省图 图片地址 | 不传显示本地默认图 ../../static/empty-icon.png
needShowBigImg | Boolean | 用于控制是否需要图片放大预览 | 默认false，true可放大 ，false不可放大；为true时，需要传windowHeight值
windowHeight | Number | 屏幕高度，用于图片放大预览 | 必填，单位px。当needShowBigImg为true时

# 说明
无图片，或者图片加载失败，或者图片较大，等待加载的时候，会显示占位图。不会出现图片空白的情况。

# 示例
```
<template>
	<view class="content">
		<WolfImage 
			:src="'https://ceshi2.sdykt.com.cn/etonmallio/dj-image/2025/03/28/67e6583e28bab1.25172453.png'"
			:width="260"
			:height="260"
			:radiusTopLeft="16"
			:radiusTopRight="16"
			:radiusBottomLeft="16"
			:radiusBottomRight="16"
			:mWidth="120"
			:mHeight="120"
			:emptyBgColor="'#F5f5f5'"
			:emptyImgUrl="''"
			:needShowBigImg="true"
			:windowHeight="windowHeight"
		/>
	</view>
</template>

<script>
	import WolfImage from '@/components/wolf-image/wolf-image.vue'
	export default {
		components: {
			WolfImage
		},
		data() {
			return {
				windowHeight: 0
			}
		},
		onLoad() {
			this.windowHeight = uni.getSystemInfoSync().windowHeight
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
```
可以出现例图的效果。