react scss引入_引入React优美的图像

react scss引入

通过提供可选的延迟加载，可选的占位符并重试失败来优雅地处理图像错误的图像组件。 在您的应用可能用于信号较差的区域（例如，乘坐火车，公共汽车或汽车旅行）时特别有用。

视觉范例

浏览器以各种状态加载图像

1. 当图像由于信号不良而失败时的默认浏览器行为
2. 使用react-graceful-image占位符
3. 带有react-graceful-image禁用的占位符
4. 使用react-graceful-image重试-如果图像无法加载，则程序包将优雅地重新尝试加载图像

（注意：它们不是互斥的，例如默认行为是同时使用占位符和重试。）

实作

占位符

• 作为嵌入到数据URI中的SVG实施-这意味着您不必触发额外的HTTP请求即可下载占位符，它直接嵌入到组件中
• 该组件还提供了一种通过placeholderColor颜色（通过placeholderColor道具）以及常规styles或className道具来更改placeholderColor styles （请注意，以这种方式传递的样式也将传递给实际图像）。
• 它还为您提供了禁用占位符的选项，在这种情况下，图像在加载之前根本不会渲染-因为在成功加载之前图像不会得到渲染，这也意味着在图像失败的情况下，它不会采用页面上预期的空间，并且图像不会出现损坏的图标

重试

• 使用setTimeout实现，它与延迟和所需的重试次数一起使用，以尝试正常地重新加载图像
• 默认情况下，每次重试之间的重试之间的延迟都会加倍，但是可以通过retry.accumulate道具进行修改，该道具接受以下值``multiply''，``add''，``noop''之一并相应地更新重试算法（请注意也可以更改延迟时间和重试次数）

使用范例

下面的代码片段将显示一个蓝色的SVG占位符，如果它位于可见视口内，则它将加载实际的给定图像，并在完成加载后使其淡入。 如果加载图像失败，则它将最多尝试重新加载图像最多8次，初始延迟为2秒，然后依次增加到4秒，8秒和16秒，依此类推（默认重试配置）。 它还会将“ content-image” className内部定义的任何样式应用于占位符（以及图像加载后的图像） 。

import React, { Component } from 'react'
import Image from 'react-graceful-image'

class YourComponent extends Component {
  render() {
    return (
      <Image
        src="path_to_image"
        className="content-image"
        alt="My awesome image"
        placeholderColor="#0083FE"
      />
    );
  }
}

下面的代码片段将显示一个浅灰色（默认）的SVG占位符，如果它位于可见视口内，则它将加载实际给定的图像，并在完成加载后使其淡入。 如果加载映像失败，则它将最多重试15次，初始延迟为3秒，然后延迟将增加到6秒，然后是9秒，然后是12秒，依此类推。 它将对占位符（以及图片加载后的图片）应用20px的填充。

import React, { Component } from 'react'
import Image from 'react-graceful-image'

class YourComponent extends Component {
  render() {
    return (
      <Image
        src="path_to_image"
        width="150"
        height="150"
        style={{padding: '20px'}}
        alt="My awesome image"
        retry={{count: 15, delay: 3, accumulate: 'add'}}
      />
    );
  }
}

感谢您的阅读，有关更多用法的详细信息，请查看项目github页面： https : //github.com/linasmnew/react-graceful-image 。 您也可以使用以下命令通过npm安装它： npm install --save react-graceful-image

翻译自: https://hackernoon.com/introducing-react-graceful-image-f9125fcefb61

react scss引入