/miyuri

this is a preact image component also support react and vue

Primary LanguageJavaScript

Miyuri（みゆり）

npm version code style: prettier

安装

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

为什么不用 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

图片服务器

以后要做的事

  • Photo Gallery 功能