Miyuri（みゆり）

安装

npm

npm install miyuri

yarn

yarn add miyuri

用法

Preact

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实现。

• MDN
• 阮一峰老师的文章
• Polyfill

为什么不用 fetch

• 如果需要跨域的话需要图片服务器设置
• blob 对象作为 src 的值在保存图片时文件名不友好

关于 placeholder

可以使用SQIP创建 placeholder

ArchLinux 上安装 SQIP

# 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 功能