使用 React 和 Redux 进行异步图像加载

Posted 2023-02-22

【中文标题】使用 React 和 Redux 进行异步图像加载

【英文标题】：Async Image Load with React and Redux

【发布时间】：2017-03-14 02:46:33

【问题描述】：

我正在尝试使用<PostList /> 容器创建一个简单的消息墙，该容器显示<Post /> 组件的列表。

 posts.map(function (post: any) 
                return <Post key=post.postid post=post />;
            )

我将一个帖子传递给Post 组件，该组件有一个<Avatar /> 组件，该组件在其中显示用户profile_pic，否则它会显示一个微调器。

我的问题是如何让组件显示在屏幕上，并在加载图像后用检索到的图像替换微调器？

我目前有以下 Reducer 和 Actions：

用户缩减器：

export default function(state = INITIAL_STATE, action : any)
    switch(action.type)
        case FETCH_USER_LOADING:
            return Object.assign(, state, isLoading: true);
        case FETCH_USER_DONE:
            return Object.assign(, state, users: state.users.concat(action.payload));


    return state;

用户操作：

export function fetchUser(id: any) 
    return function (dispatch: any) 
        dispatch( type: FETCH_USER_LOADING );
        return axios.get(`$ROOT_URL/users/$id`, 
            headers:  token: localStorage.getItem('token') 
        )
            .then(function (response) 
                dispatch(type: FETCH_USER_DONE, payload: response.data);
                return response.data
            )
     

【参考方案1】：

有很多方法可以做到。

其中之一是编写自己的组件，其中一个新加载的图像会提示在componentDidMount 中重绘。这是您可以在自己的项目中使用的惰性图像的完整源代码：

export default class LazyImage extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      loaded: false,
      error: false
    ;
  

  componentDidMount() 
    const img = new Image();
    img.onload = () => 
      this.setState(
        loaded: true
      );
    ;
    img.onerror = () => 
      this.setState(
        error: true
      );
    ;
    img.src = this.props.src;
  

  render() 
    if (this.state.error) 
      return <img
        className=this.props.className
        style=this.props.style
        src=this.props.unloadedSrc
        alt=this.props.alt />
     else if (!this.state.loaded) 
      return <img
        className=this.props.className
        style=this.props.style
        src=this.props.unloadedSrc
        alt=this.props.alt />
    
    return <img
      className=this.props.className
      style=this.props.style
      src=this.props.src
      alt=this.props.alt />
  

然后你会像这样使用它：

<LazyImage unloadedSrc=unloadedSrc src=src />

然后，您可以选择使用大量组件，只需通过谷歌搜索即可找到：

“图像加载反应” “反应图像延迟加载”

或任何类似的搜索词变体。我最喜欢的组件是react-imageloader。

我希望这会有所帮助。

【参考方案2】：

我创建了一个用于延迟加载图像的库。它的主要功能是提供图像的动态调整大小，但它也可以解决您的问题。

https://github.com/peterlazzarino/react-adaptive-image

这是一个可以用于延迟图像加载的示例，它将解析来自 imgur 的图像。在我的生产应用程序中，我的图像解析器指向图像服务器，但这完全可以自定义。您只需将 .header-image 类设置为具有高度和宽度。

import React from 'react';
import ReactDOM from 'react-dom';
import  initImages  from 'react-adaptive-image';
import AdaptiveImage from 'react-adaptive-image';

initImages(
    imageResolver: function(image)
        return `https://i.imgur.com/$image.fileName`
    
)

class App extends React.Component 
    render() 
      return (
        <AdaptiveImage backgroundImage className="header-image" fileName='U6zWkcZ.png' />
      );
    
  

ReactDOM.render(<App />, document.getElementById('react-root'));