random-image-component

基于 https://picsum.photos 的 Vue 3 图片占位组件。组件会自动读取自身渲染尺寸，并请求匹配外层容器大小的图片。

安装

npm install random-image-component

全局注册

import { createApp } from 'vue';
import RandomImagePlugin from 'random-image-component';
import App from './App.vue';

createApp(App).use(RandomImagePlugin).mount('#app');

<template>
  <div class="image-box">
    <RandomImage random />
  </div>
</template>

<style scoped>
.image-box {
  width: 320px;
  height: 180px;
}
</style>

按需使用

<script setup lang="ts">
import { RandomImage } from 'random-image-component';
</script>

<template>
  <div class="image-box">
    <RandomImage :random="true" />
  </div>
</template>

配置

| 配置 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | random | boolean | false | 是否使用随机图片；开启后会为当前组件实例固定一张随机图，避免初始化或尺寸变化时再次跳图。 |

样式

组件默认 width: 100%、height: 100%，会铺满外层容器。实际展示效果由外层容器尺寸决定。

<template>
  <div class="image-box">
    <RandomImage random />
  </div>
</template>

<style scoped>
.image-box {
  width: 100%;
  height: 240px;
}
</style>

本地开发

npm install
npm run dev
npm run build