npm
npm install miyuriyarn
yarn add miyuriPreact
import { h, Component } from 'preact';
import Image from 'miyuri';
export default ExamplePage extends Component {
render() {
return (
<ul>
<li><Image src="1.jpg" placeholder="1.svg" /></li>
<li><Image src="2.jpg" placeholder="2.svg" /></li>
<li><Image src="3.jpg" placeholder="3.svg" /></li>
</ul>
);
}
}React
import React, { Component } from 'preact';
import Image from 'miyuri/react';
export default ExamplePage extends Component {
render() {
return (
<ul>
<li><Image src="1.jpg" placeholder="1.svg" /></li>
<li><Image src="2.jpg" placeholder="2.svg" /></li>
<li><Image src="3.jpg" placeholder="3.svg" /></li>
</ul>
);
}
}Vue
提供placeholder和errorholder两个 slot（优先使用属性）。
<template>
<ul>
<li v-for="image in images" :key="image.id">
<miyuri :src="image.src" :placeholder="image.thumb"></miyuri>
</li>
</ul>
</template>
<script>
import miyuri from 'miyuri/vue'
export default {
name: 'ExamplePage',
components: {
miyuri
},
}
</script>| 属性 | 描述 |
|---|---|
src |
图片链接 |
placeholder |
如果是string那么使用 <img src={placeholder} /> 作为 placeholder，否则使用 <placeholder /> |
errorholder |
如果是string那么使用 <img src={errorholder} /> 作为 errorholder，否则使用 <errorholder /> |
使用IntersectionObserver实现。
- 如果需要跨域的话需要图片服务器设置
- blob 对象作为 src 的值在保存图片时文件名不友好
可以使用SQIP创建 placeholder
# 1.安装go
~$ yaourt -S go go-tools
# 2.设置环境变量（如果使用fish）
~$ vim .config/fish/config.fish # 添加：set -gx PATH /home/用户名/go/bin $PATH
# 3.安装primitive
~$ go get -u github.com/fogleman/primitive
# 4.安装SQIP
~$ npm i -g sqip- cloudinary
- FastDFS(自己搭建)
- Photo Gallery 功能