GET请求图片状态校验异常：404时无法切换默认图片

看起来你遇到的核心问题是混淆了接口请求失败和图片资源加载失败的场景，咱们一步步来拆解解决：

一、原生JS方案的问题与修复 #

你原来的fetch逻辑只处理了「接口请求失败」的情况（比如接口超时、500错误、跨域等），但只要接口能正常返回JSON数据——哪怕返回的图片链接是404——fetch的catch都不会触发。这就是为什么你之前的失效判断和catch逻辑都不起作用的原因。

正确的思路是：拿到图片链接后，用Image对象预加载图片，监听它的加载状态：

fetch('url')
  .then(response => response.json())
  .then(data => {
    const imgUrl = data['img-info'];
    const img = new Image();
    
    // 图片加载成功时，设置背景图
    img.onload = () => {
      $('#content').css({
        'background-image': `url(${imgUrl})`,
        'background-size': 'cover'
      });
    };
    
    // 图片加载失败（比如404）时，切换默认图
    img.onerror = () => {
      const defaultImg = 'http://localhost/img/img-default.png';
      $('#content').css({
        'background-image': `url(${defaultImg})`,
        'background-size': 'cover'
      });
      console.log('图片加载失败，已切换默认图');
    };
    
    // 触发图片加载
    img.src = imgUrl;
  })
  .catch(err => {
    // 这里只处理接口本身请求失败的情况
    console.error('接口请求失败:', err);
    const defaultImg = 'http://localhost/img/img-default.png';
    $('#content').css({
      'background-image': `url(${defaultImg})`,
      'background-size': 'cover'
    });
  });

二、React组件的问题与修复 #

你的onError方法没生效，大概率是this绑定问题，另外还要注意避免默认图也加载失败时的无限循环触发。

类组件修复方案 #

方式1：构造函数绑定this

class ImageSlider extends React.Component {
  constructor(props) {
    super(props);
    // 手动绑定this，确保方法内的this指向组件实例
    this.addDefaultSrc = this.addDefaultSrc.bind(this);
  }

  addDefaultSrc(ev) {
    // 先判断当前src是否已经是默认图，避免无限触发onError
    if (ev.target.src !== 'http://localhost/img/img-default.png') {
      ev.target.src = 'http://localhost/img/img-default.png';
    }
  }

  render() {
    return (
      <img 
        onError={this.addDefaultSrc} 
        className="img-slider img-responsive" 
        src={this.props.program['img-info']} 
      />
    );
  }
}

方式2：箭头函数定义方法（自动绑定this）

class ImageSlider extends React.Component {
  // 箭头函数会自动绑定组件实例的this
  addDefaultSrc = (ev) => {
    if (ev.target.src !== 'http://localhost/img/img-default.png') {
      ev.target.src = 'http://localhost/img/img-default.png';
    }
  }

  render() {
    return (
      <img 
        onError={this.addDefaultSrc} 
        className="img-slider img-responsive" 
        src={this.props.program['img-info']} 
      />
    );
  }
}

函数组件修复方案 #

函数组件里直接用箭头函数处理即可，无需担心this绑定问题：

const ImageSlider = (props) => {
  const addDefaultSrc = (ev) => {
    if (ev.target.src !== 'http://localhost/img/img-default.png') {
      ev.target.src = 'http://localhost/img/img-default.png';
    }
  };

  return (
    <img 
      onError={addDefaultSrc} 
      className="img-slider img-responsive" 
      src={props.program['img-info']} 
    />
  );
}

内容的提问来源于stack exchange，提问作者larry_82