如何在 React JS 組件中預加載圖像？

Question

當發生signInError時，我目前正在渲染一個子組件。 signInError存儲在父組件中，如果它不為 null，則按照以下代碼呈現<SignInError/>組件：

父組件.js

  // Some code...

  render() {
    return(
      <div>
        <SignInForm
          doSignIn={this.doSignIn}
          resetSignInError={this.resetSignInError}
          signInError={this.state.signInError}
        />
        {this.state.signInError && <SignInError/>}
      </div>
    );
  }

到目前為止， SignInError.js很好，這是子組件SignInError.js

import React from 'react';
import RoundImage from '../../../UI/Common/RoundImage';
import Newman from '../../../../assets/newman-min.png';

class SignInError extends React.Component {
  constructor(props){
    super(props);
  }

    componentDidMount(){
    const img = new Image();
    img.src = Newman;
  }

  render(){
    return(
      <div>
      <div>
        <RoundImage src={img.src}/> // <--- img is undefined here!!!
      </div>
      <div>
        Hello... Newman!
      </div>
    </div>
    );
  }
}

export default SignInError;

圓形圖像.js

import React from 'react';

const RoundImage = (props) => {
  return (
    <div>
      <img src={props.src}/>
    </div>
  );
}

export default RoundImage;

如何在 React.js 中預加載圖像？

Stack Over flow 上的這個問題的答案（上面的鏈接）告訴我在componentDidMount()方法中創建img對象以強制瀏覽器加載它。 所以我做到了，正如您從上面的代碼中看到的那樣。 但是現在，當我嘗試將它作為 prop 傳遞給我的render方法中的孫子組件時，我無法訪問img ，因為它是在另一個方法中定義的。

解決這個問題的最佳方法是什么？ 我只需要加載圖像並與錯誤消息一起顯示。 否則，如果您的瀏覽器尚未緩存它，錯誤消息將顯示在圖像之前。 謝謝您的幫助。

Answer 1

圖片下載發生在瀏覽器中。 渲染到 DOM 也發生在瀏覽器中。

通過preloading ，您的意思是您希望組件僅在圖像准備好時才呈現？

如果是這樣，你可以這樣做：

componentDidMount() {
  const img = new Image();
  img.onload = () => {
    // when it finishes loading, update the component state
    this.setState({ imageIsReady: true });
  }
  img.src = Newman; // by setting an src, you trigger browser download

}

render() {
  const { imageIsReady } = this.state;

  if (!imageIsReady) {
    return <div>Loading image...</div>; // or just return null if you want nothing to be rendered.
  } else {
    return <img src={Newman} /> // along with your error message here
  }
}

Answer 2

有點不同的方法，但是如果您事先有圖像源，則可以將圖像源作為帶有預加載選項的鏈接引用添加到主 html 文件中。 瀏覽器將預加載圖像（優先級相對較低），並且在您的應用加載圖像時，它應該緩存在瀏覽器內存中。

<head>
..
..
<link rel="preload" href="<your_image_source_here>" as="image">
...
</head>

在這種方法中，我們將預加載過程與代碼分開。 當您預先擁有圖像源（而不是動態）並且不需要緩存大量圖像時（在 html 頭中添加大量鏈接列表會有點混亂，盡管可能的）

您可以在此處了解有關鏈接預加載的更多信息：使用 rel="preload"預加載內容

Answer 3

就我而言，我從圖像的初始 src 屬性開始，並希望在瀏覽器加載圖像后延遲更改它們，因此我在 Typescript 中編寫了以下鈎子：

import { useEffect, useState } from 'react';

export const useImageLoader = (initialSrc: string, currentSrc: string) => {
  const [imageSrc, _setImageSrc] = useState(initialSrc);

  useEffect(() => {
    const img = new Image();
    img.onload = () => {
      _setImageSrc(currentSrc);
    };
    img.src = currentSrc;
  }, [currentSrc]);

  return [imageSrc];
};

如何在 React JS 組件中預加載圖像？

問題描述

3 個解決方案

解決方案1
16 已采納 2019-01-08 17:04:31

解決方案2
5 2019-01-08 16:48:59

解決方案3
0 2021-06-12 21:03:17

如何在 React JS 組件中預加載圖像？

問題描述

3 個解決方案

解決方案1 16 已采納 2019-01-08 17:04:31

解決方案2 5 2019-01-08 16:48:59

解決方案3 0 2021-06-12 21:03:17

解決方案1
16 已采納 2019-01-08 17:04:31

解決方案2
5 2019-01-08 16:48:59

解決方案3
0 2021-06-12 21:03:17