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

IT技术 javascript reactjs error-handling state
2021-04-01 13:35:51

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

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

我对react和使用状态仍然是新手......问题是，我应该使用状态来检查断开的链接，我该怎么做？

这就是我将数据作为module中的props获取的方式：

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>

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

6个回答

有一个称为图像的本机事件，onerror如果无法加载图像，则可以执行操作。

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

//in your component
addDefaultSrc(ev){
  ev.target.src = 'some default image url'
}
@nyhunter77 这个 MDN 页面是一个不错的开始developer.mozilla.org/en-US/docs/Web/Events
2021-05-28 13:35:51
可能是一个愚蠢的问题，但我将如何使用此页面上的信息来得出我的答案？这里有太多我不知道该看什么。谢谢！@eltonkamami
2021-05-28 13:35:51
@nyhunter77 被解雇时专栏可以帮助您。但你必须追踪你的问题。在这种情况下，该列说A resource failed to load.
2021-05-30 13:35:51
太棒了！这正是我所需要的，我在哪里可以了解更多关于这些本地事件的信息？我将从谷歌搜索开始，但如果那里有好的文档，请告诉我。我一直试图弄清楚这个几个小时：D
2021-06-04 13:35:51
onError现在被标记为已弃用（它似乎不再起作用）。您知道新版本的最佳方法是什么吗？
2021-06-20 13:35:51

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

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

我是如何处理错误的：

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

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

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

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

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

根据我的理解，您希望看到损坏的图像。你应该在 onError 属性中调用一个方法。检查此 jQuery/JavaScript 以替换损坏的图像

当然是。我只是给你提示如何做到这一点。react 也使用 onError 属性，如果您正在研究 react，您知道如何在图像标记中的 onError={somecomponentmethod} 属性上调用组件方法。
2021-06-06 13:35:51
据我了解，混合 Jquery 和 React JS 是一种糟糕的形式。到目前为止我还不需要，但我有时确实觉得我的一只手臂被绑在背后
2021-06-08 13:35:51
是的，谢谢，我尝试了一些类似于“Jquery方式”或纯JS方式的方法，但没有成功
2021-06-20 13:35:51
其它你可能感兴趣的问题
上一篇react-router v4 - browserHistory 未定义 下一篇在 React.JS 中刷新后，如何让用户保持登录 Firebase？