如何在 React JS 中检查损坏的图像

Question

我正在编写一个模块，它从 json 获取文章数据并在文章文本上显示大图像，正如他们所说的英雄模块。

我已经获得数据并进行了设置，如果有图像，它将显示该图像，如果数据中没有图像，它将显示默认图像。问题是此方法不会替换损坏的 links 以显示默认图像。

我对反应和使用状态还是陌生的...问题是，我应该使用状态来检查损坏的 link 吗？我该怎么做？

这就是我在模块中获取数据作为道具的方式：

const { newsItemData: {
          headline = '',
          bylines = [],
          publishedDate: publishDate = '',
          updatedDate: updatedDate = '',
          link: newsLink = '',
          contentClassification: category = '',
          abstract: previewText = '',
          abstractimage: { filename: newsImage = '' } = {},
          surfaceable: { feature: { type: featureType = '' } = {} } = {},
        } = {},
        wideView,
        showPill,
        defaultImage } = this.props;

我是这样显示信息的：

<div className={imageContainerClassName} style={customBackgroundStyles}>
      {newsImage ? <img className="img-responsive" src={newsImage} alt={headline}/> : <img className="img-responsive" src={defaultImage} alt={headline}/>}
</div>

我应该怎么做才能同时检查损坏的图像？我认为这就是所需的所有相关数据，让我知道是否需要显示其他任何数据。谢谢！

Answer 1

有一个名为 onerror 的图像本机事件，可以在无法加载图像时执行操作。

<img onError={this.addDefaultSrc} className="img-responsive" src={newsImage} alt={headline}/>

//in your component
addDefaultSrc(ev){
  ev.target.src = 'some default image url'
}

Answer 2

据我了解，您希望看到损坏的图像。你应该在 onError 属性中调用一个方法。检查这个 jQuery/JavaScript to replace broken images

Answer 3

如前所述，onError 是必经之路。

如果您正在寻找可以为您处理此问题的组件，请尝试 https://github.com/socialtables/react-image-fallback

Answer 4

这是我检查图片是否损坏的方法。有一个名为 onError 的属性，当图像损坏或无法加载时会调用该属性。例如，这里是 img 标签：

<img id={logo.id} src={logo.url} alt ={logo.name} onError={this.handleImageError} />

我是如何处理错误的：

handleImageError = e => { //write your logic here.}

Answer 5

如果您知道图像的错误将是缺少它，就像您正在循环配置文件库并且其中一些没有可用的图片，那么您可以像这样简单地插入图像的路径作为回调:

<img
   height="auto"
   width={140}
   src={bizLogo || "/img/error.png"}
   alt="test"
/>

Answer 6

在我的例子中，打算在使用 map() 函数的组件中使用，在那种情况下需要将 e.target.src 更改为 e.currentTarget.src，如以下代码：

    <img src={original.image} 
         alt=""
         onError={e => { e.currentTarget.src = "your_image_not_found_defalt_picture_here"; }}
    />

Answer 7

import { useState } from "react";
import "./styles.css";
export default function App() {
  const url = "https://secure.gravatar.com/avatar?d=wavatar";
  const [showImage, setShowImage] = useState(true);
  const hideImg = (event) => {
    // this.setState({ showImg: false });
    setShowImage(false);
  };
  return (
    <div>
      {showImage ? (
        <img src={url} alt="perkimage" onError={hideImg} />
      ) : (
        "Default text or image"
      )}
    </div>
  );
}

如何在 React JS 中检查损坏的图像

How to check for broken images in React JS

javascript

error-handling

state

reactjs