如果未找到 src 图像，则显示默认图像答案

【问题标题】：Show a default image if src image is not found如果未找到 src 图像，则显示默认图像
【发布时间】：2023-02-05 00:07:08
【问题描述】：

如果 src 无效，我正在制作一个 React 应用程序我现在将其替换为默认图像有时无法从服务器加载具有有效 src 的图像，因为它未找到 (404) 我在互联网上搜索并尝试了这些：

<img onError={this.src="https://image.defaul-img.jpg"} src={!imgURL ? "https://image.defaul-img.jpg" : imgURL} className="card-img-top" alt="..." />

和

<img src={!imgURL ? "https://image.defaul-img.jpg" : imgURL} className="card-img-top" alt="https://image.defaul-img.jpg" />

但它们都不起作用我该怎么办

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

您可以使用 JavaScript 中的 try-catch 语句来处理丢失图像文件的错误并显示默认图像。这是 React 中的一个示例：

import React from 'react';
import DefaultImage from './default-image.jpg';

class ImageComponent extends React.Component {
  state = {
    imageUrl: ''
  };

  componentDidMount() {
    this.setImage();
  }

  setImage = () => {
    try {
      import(`./${this.props.imageName}.jpg`).then(({ default: imageUrl }) => {
        this.setState({ imageUrl });
      });
    } catch (error) {
      this.setState({ imageUrl: DefaultImage });
    }
  };

  render() {
    return <img src={this.state.imageUrl} alt="Image" />;
  }
}

export default ImageComponent;

此代码使用动态导入来加载图像文件。如果未找到图像文件，将执行 catch 块并使用默认图像代替。

如果您使用的是最新的 React，您可以像这样使用 Hook API。

import React, { useState, useEffect } from 'react';
import DefaultImage from './default-image.jpg';

const ImageComponent = ({ imageName }) => {
  const [imageUrl, setImageUrl] = useState('');

  useEffect(() => {
    setImage();
  }, []);

  const setImage = () => {
    try {
      import(`./${imageName}.jpg`).then(({ default: image }) => {
        setImageUrl(image);
      });
    } catch (error) {
      setImageUrl(DefaultImage);
    }
  };

  return <img src={imageUrl} alt="Image" />;
};

export default ImageComponent;

【讨论】：

【解决方案2】：

这段代码有效，我在堆栈溢出中找到它抱歉，我不会在再次正确研究之前发布问题

<img onError={({ currentTarget }) => {
    currentTarget.onerror = null; // prevents looping
    currentTarget.src = "https://image.defaultimg.jpg";
                }} src={!imgURL ? "https://image.defaultimg.jpg" : imgURL} className="card-img-top" alt="..." />

【讨论】：