@readr-media/image v1.0.0

@readr-media/react-image ·

Feature

• 可依據傳入的多個圖片URL，由小至大依序載入。
• 當所有圖片URL皆載入失敗時，載入預設圖片。
• 實作圖片載入動畫效果。
• 實作圖片懶載入（lazy load）。

How to Use This Pkg as React Component ?

1. Install the npm package yarn add @readr-media/react-image
2. Import component in the desired place

import CustomImage from '@readr-media/react-image'
const IMAGES_URL = { w400: "400.png", original: "original.png"}
export default function SomeComponent() {
  return (
    <div>
      <OtherComponent/>
      <CustomImage images={IMAGES_URL}/>
    </div>
  )
}

Props

Precautions

若使用該套件時，禁用了瀏覽器的cache，則同張圖片會載入兩次（一次在函式loadImage()中載入各個大小的圖片，一次則在useEffect中，將成功載入的圖片掛載至<img>上），這是正常的現象。 之所以要分載入兩次，而不是在loadImage()中嘗試載入圖片並掛載至<img>，是因為這樣才能在圖片載入時顯示loadingImage。

若無禁用瀏覽器快取，則僅會載入一次圖片。

Installation

yarn install

Development

$ yarn dev
// or
$ npm run dev
// or
$ make dev

Build (Webpack Bundles and ES5 Transpiling)

$ npm run build
// or
$ make build

Build Webpack Bundles

$ make build-dist

Transpile React, ES6 Codes to ES5

$ make build-lib

NPM Publish

After executing Build scripts, we will have ./dist and /lib folders, and then we can execute publish command,

npm publish

Note: before publish npm package, we need to bump the package version first.

TODOs

• 建立 CI pipeline，透過 CI 產生 npm package，並且上傳至 npm registry
• 透過 Lerna 控制 packages 之間的版號
• 實作Responsive Image，並由螢幕寬度決定載入圖片大小。
• 在禁用瀏覽器的快取情況下，仍僅需載入圖片一次。