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

【问题标题】：How to check for broken images in React JS如何在 React JS 中检查损坏的图像
【发布时间】：2016-11-26 10:26:19
【问题描述】：

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

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

我仍然是反应和使用状态的新手......问题是，我应该使用状态来检查损坏的链接吗？我该怎么做？

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

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>

我应该怎么做才能同时检查损坏的图像？我认为这是所需的所有相关数据，如果我应该显示其他任何内容，请告诉我。谢谢！

【问题讨论】：

我写了一些可以解决这个问题的东西：github.com/mbrevda/react-img-multi
找到了这个视频教程 - youtu.be/90P1_xCaim4 它实际上帮助我为我的应用程序构建了一个完整的图像组件。我还发现了这个以及我的图像组件的很棒的预加载器 - youtu.be/GBHBjv6xfY4。通过将两者结合起来，您可以为用户提供出色的用户体验。

标签： javascript reactjs error-handling state

【解决方案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'
}

【讨论】：

太棒了！这正是我所需要的，我在哪里可以了解更多关于这些原生事件的信息？我将从谷歌搜索开始，但如果那里有好的文档，请告诉我。我已经尝试了几个小时来解决这个问题：D
@nyhunter77 这个 MDN 页面是一个不错的开始developer.mozilla.org/en-US/docs/Web/Events
可能是一个愚蠢的问题，但我将如何使用此页面上的信息来得出我的答案？这里有这么多，我不知道该看什么。谢谢！ @eltonkamami
@nyhunter77 被解雇的时间栏可以帮助您。但你必须追查你的问题。在这种情况下，该列显示A resource failed to load.
onError 现在被标记为已弃用（而且它似乎不再起作用了）。您知道新版本的最佳方法是什么吗？

【解决方案2】：

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

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

我是如何处理错误的：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

如前所述，onError 是要走的路。

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

【讨论】：

【解决方案5】：

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

【讨论】：

据我了解，混合使用 Jquery 和 React JS 是一种不好的形式。到目前为止，我还不需要，但有时我确实觉得我的一只手臂被绑在背后
当然可以。我只是给你提示如何做到这一点。 react 也使用 onError 属性，如果您正在处理 react，您知道如何在属性上调用组件方法，例如图像标签中的 onError={somecomponentmethod}。
是的，谢谢，我尝试了一些类似于“Jquery方式”或纯JS方式的方法，但没有成功

【解决方案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"; }}
    />

【讨论】：