react 는 그림 을 불 러 오 는 중 불 러 오 는 데 실 패 했 습 니 다.세 단계 의 원리 분석 을 실 패 했 습 니 다.

최근 블 로그 에 따 르 면 프로젝트 목록 에 많은 그림 이 있 는 것 으로 나 타 났 다.불 러 오 는 것 이 느 리 고 한loading의 그림 으로 자 리 를 잡 으 려 고 한다.이와 함께 그림 불 러 오 는 데 실패 하면 잘못된 그림 을 표시 하고 원래 의 오 류 를 표시 하지 않 으 면 보기 흉 합 니 다.
효과.

원리 해석
이것 은 하나의 구성 요소 입 니 다.그림 에 표 시 된 구성 요소 입 니 다.img 태그 의 url 주 소 를 직접 변경 하면 됩 니 다.맞습니다.vue 에서 주 소 를 직접 변경 하면 vue 는 응답 식 업데이트 데 이 터 를 가 집 니 다.
그림 이벤트
그림 은 많은 이벤트 가 있 습 니 다.예 를 들 어onload,onerror등 그림 을 불 러 오 면 onload 이벤트 가 호출 됩 니 다.불 러 오 는 데 성공 하 든 불 러 오 는 데 실패 하 든 이 방법 을 사용 합 니 다.onerror방법 은 그림 이 표시 되 지 않 으 면 이 방법 을 사용 하 는 것 이다.이 두 가지 방법 을 비교 해 보면 우 리 는 onload 를 사용 하여 그림 을 불 러 오기 시작 해 야 하고 그림 이 성공 할 수 있 으 며 실패 할 수 있다 는 것 을 알 수 있다.
구성 요소 코드

import { ImgHTMLAttributes } from "react";

/**
 *         
 */
export interface IImagProps<T> extends ImgHTMLAttributes<T> {
  /**
   *       
   */
  loadingImg?: string,
  /**
   *        
   */
  errorImg?: string,
 /**
  *          
  */
  src: string,
}

import React, { useState } from 'react'
//              
import loadImg from './../../../assets/imgs/loading/load.gif';
import errorImg from './../../../assets/imgs/loading/error.png'
export default function Img(props: IImagProps<any>) {
  //     
  const [src, setSrc] = useState(props.loadingImg as string)
  //        ，            
  const [isFlag, setIsFlag] = useState(false)
  /**
   *       
   */
  const handleOnLoad = () => {
    //          
    if (isFlag) return;
    //     img  
    const imgDom = new Image();
    imgDom.src = props.src;
    //              
    imgDom.onload = function () {
      setIsFlag(true)
      setSrc(props.src)
    }
    //              
    imgDom.onerror = function () {
      setIsFlag(true)
      setSrc(props.errorImg as string)
    }
  }
  
  return (
    <>
      <img src={src}
        onLoad={handleOnLoad}
        style={{
          height: 'inherit',
        }}
      ></img>
    </>
  )
}
//                    
Img.defaultProps = {
  loadingImg: loadImg,
  errorImg: errorImg
}

PS:React 의 img 그림 로드 완료 전 loading 효 과 를 살 펴 보 겠 습 니 다.

저 는 React 에서 이런 수요 가 있 습 니 다.그것 은 바로 제 가 그림 을 불 러 오기 전에 loading 애니메이션 효 과 를 계속 표시 하고 싶 습 니 다.그림 을 불 러 오 면 그림 의 렌 더 링

을 실현 하고 싶 습 니 다.

먼저 구체 적 인 사 고 를 말 한 다음 에 실제 응용

을 말한다.

실현 사고:

//              
var imglist = ['http://example.com/demo1.png','http://example.com/demo2.png','http://example.com/demo3.png']
// images                
var images = []
imglist.forEach(el=>{
	var image = new Image()
	image.src = el
	image.onload = function(){
		//     image     
		//       image   images 
		images.push(image)
	}
})

//             
if(images.length === 3){
	//                    ，       
	//          
}else{
	//                  ，     loadding    
	// loadding    
}

구체 적 실현 의 예

import React from 'react'
import { Carousel, Spin } from 'antd' //   antd
//    Home  
class Home extends React.Component{
	constructor(props){
		super(props)
		this.state = {
			imglist: [
				{
					id: '01',
					src: 'http://example.com/demo1.png',
					alt: 'demo1'
				},
				{
					id: '02',
					src: 'http://example.com/demo2.png',
					alt: 'demo2'
				},
				{
					id: '03',
					src: 'http://example.com/demo3.png',
					alt: 'demo3'
				}
			],
			images: []
		}
	}
	UNSAFE_componentWillMount(){
		//          
		var { imglist } = this.state
		var images = []
		imglist.forEach(el=>{
			var image = new Image()
			image.src = el.src
			image.onload = ()=>{
				images.push(image)
				this.setState({
					images
				})
			}
		})
	}
	render(){
		var { imglist, images } = this.state
		if(images.length === 3){
			//               ，             
			return (
				<div className='common-body'>
					<Carousel autoplay>
						{imglist.map(el=>(
							<img src={el.src} key={el.id} alt={el.alt} />
						))}
					</Carousel>
				</div>
			)
		}else{
			//              ，       loading    
			return (
				<div className='common-loading'>
					<Spin tip='Loading...' size='large'></Spin>
				</div>
			)
		}
	}
}
export default Home

이 방법 은 그래도 비교적 쓰기 좋다.
이상 은 react 구현 이미지 로드 중 로드 완료 실패 3 단계 의 원리 분석 에 대한 상세 한 내용 입 니 다.react 이미지 로드 완료 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!