Image ​

This component is an optimized image component based on uniapp, which supports lazy loading of images, preloading, post-loading effects, placeholders for loading and loading failures, etc.

Solved a major pain point: the problem of lazy loading not working, and manually supported app, weixin, h5.

platform compatibility ​

basic use ​

Configure the width width and height height of the image, and the src path to use.

<template>
  <wu-image
    :show-loading="true"
    :src="src"
    width="80px"
    height="80px"
    @click="click"
  ></wu-image>
</template>

<script>
export default {
  data() {
    return {
      src: "https://wuui.cn/1.jpeg",
    };
  },
};
</script>

<template>
  <wu-image
    :show-loading="true"
    :src="src"
    width="80px"
    height="80px"
    @click="click"
  ></wu-image>
</template>

<script>
export default {
  data() {
    return {
      src: "https://wuui.cn/1.jpeg",
    };
  },
};
</script>

picture shape ​

• Set the shape of the image through the shape parameter, circle is a circle, and square is a square
• If it is a square, you can also set the rounded corner value through the radius property

<wu-image src="https://wuui.cn/1.jpeg" shape="circle"></wu-image>

<wu-image src="https://wuui.cn/1.jpeg" shape="circle"></wu-image>

clipping mode ​

Configure the filling mode through the mode parameter, which is exactly the same as the mode parameter of the image component of uni-app, see: [image](https://uniapp.dcloud.net.cn/component/ image.html#mode-valid value)

<wu-image src="https://wuui.cn/1.jpeg" mode="widthFix"></wu-image>

<wu-image src="https://wuui.cn/1.jpeg" mode="widthFix"></wu-image>

Lazy loading ​

**Note: Only for app, h5, and WeChat applets, it is enabled by default. **

lazy-load is used to enable or disable lazy loading

lazy-load-root-margin is used to set the root margin of lazy loading. If you set a negative number, it will be displayed after entering the specified distance from the view. If you set a positive number, it will be displayed when it is far away from the view.

<wu-image
  v-for="num in 30"
  :key="num"
  src="https://wuui.cn/1.jpeg"
  width="80px"
  height="80px"
  :lazy-load="true"
  :lazy-load-root-margin="-5"
></wu-image>

<wu-image
  v-for="num in 30"
  :key="num"
  src="https://wuui.cn/1.jpeg"
  width="80px"
  height="80px"
  :lazy-load="true"
  :lazy-load-root-margin="-5"
></wu-image>

loading prompt ​

During the image loading process, it is in the loading state (a small icon is displayed by default), you can use the loading custom slot, combined with the wu-loading component of wu-ui, to achieve the loading animation effect.

<wu-image src="https://wuui.cn/1.jpeg">
  <template v-slot:loading>
    <wu-loading-icon color="red"></wu-loading-icon>
  </template>
</wu-image>

<wu-image src="https://wuui.cn/1.jpeg">
  <template v-slot:loading>
    <wu-loading-icon color="red"></wu-loading-icon>
  </template>
</wu-image>

loading error message ​

When the picture fails to load, an error prompt icon is displayed by default. You can customize the slot through error to realize a personalized prompt method.

<wu-image src="https://wuui.cn/1.jpeg">
  <template v-slot:error>
    <view style="font-size: 24rpx;">Loading Error</view>
  </template>
</wu-image>

<wu-image src="https://wuui.cn/1.jpeg">
  <template v-slot:error>
    <view style="font-size: 24rpx;">Loading Error</view>
  </template>
</wu-image>

fade animation ​

The component comes with a fade-in animation effect when loading is complete:

• Configure whether to enable the animation effect through the fade parameter
• Configure the transition time of the animation through the duration parameter, in ms

<wu-image src="https://wuui.cn/1.jpeg" :fade="true" duration="450"></wu-image>

<wu-image src="https://wuui.cn/1.jpeg" :fade="true" duration="450"></wu-image>

event bubbling ​

By default, the component allows internal and external event bubbling, because in many cases, we want to click on the picture, and the click event of the parent element where the picture is located can also be triggered.

If you want to avoid event bubbling, you can nest a view outside the component and add @tap.stop to it.

<!-- Clicking on the image will not trigger the clickHandler -->
<view @tap="clickHandler">
	<view @tap.stop>
		<wu-image src="https://wuui.cn/1.jpeg"></wu-image>
	</view>
</view>

<!-- Clicking on the image will not trigger the clickHandler -->
<view @tap="clickHandler">
	<view @tap.stop>
		<wu-image src="https://wuui.cn/1.jpeg"></wu-image>
	</view>
</view>

API ​

Button Props ​

Button Slot ​

Button Events ​