Question

我正在编写一个从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>

为了检查损坏的图像，我该怎么办？我想这是所有需要的相关数据，请告诉我是否应该展示其他内容。谢谢！

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是可行的方法。

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

Answer 3

根据我的理解，你想看到破碎的图像。你应该在onError属性中调用一个方法。检查一下 jQuery/JavaScript to replace broken images

Answer 4

如果您知道图像错误将是由于缺少图像而导致的，例如您正在循环浏览配置文件库，并且其中一些没有可用的图片，那么您可以简单地将图像的路径作为回调插入，如下所示：< / p>

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

Answer 5

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

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

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

5 个答案: