Reactjs 检查图像文件是否存在，如果不存在，则加载另一个默认文件

在使用React进行开发时，我遇到了以下问题：

我从远程API检索某些数据，并提供相关信息来描述一本书：。这将返回一个JSON字符串：

{"status":200,"out":[{"bookid":"00637","title":"\u4e2d\u56fd\u53e4\u4ee3\u601d\u60f3\u53f2","author":"\u6768\u8363\u56fd","region":"\u4e2d\u56fd\u5927\u9646","purchdate":"1973-09-13"}]}

在这个返回中，我填充了一个

状态

对象，并在页面中显示该书

一件事是，我需要显示一个与该书相关联的书籍封面。我没有API中存储（因此随机返回）的所有书籍的封面

如果有封面图像，我可以通过以下方式安全地显示该图像：

    <img
        className="ls-l"
        src={this.state.cover}
    .../>

封面

由

bookid

填充

但如果不是，我必须显示一个

default.jpg

作为后备

所以基本上我需要检查这个.state.cover文件是否存在

任何意见都将不胜感激

更新

感谢下面所有的输入

我想可能是我没有把自己说清楚

无论映像文件是否存在于我的服务器端，

此.state.cover

将从

bookid

填充，即以“”的形式，其中

12345

是

bookid

真正的情况是文件

12345.jpg

存在，但

54321.jpg

不存在

因此，在显示

标记中的图像之前，我必须将

54321.jpg

替换为

default.jpg

。我认为这是一个与文件制作有关的问题

下面的方法假设未设置

封面

字段，我的代码中不是这种情况

---

不过，谢谢大家

使用条件运算符检查覆盖属性是否存在。用这样的东西

const defaultImage = "some-url";
<img
        className="ls-l"
        src={this.state.cover ? this.state.cover : defaultImage}
    .../>

const defaultImage=“some url”；

两种不同的方式：

let{cover=“fallback.jpg”}=this.state

或

src={this.state.cover | |“fallback.jpg”}

或者，您可以利用函数式编程的优点来摆脱空检查

         fetch(url,{}) 
              .then( (response)=> response.json())
                   .then((book) => this.setState({
                             picture: book.picture || defaultCover.jpg   
                                }))

您可以使用这里常用的
|
运算符。这样行得通。但一定要保证订货。在
pic1 | | pic2
pic1首先被选中。如果它没有定义，它将用于pic2。
非常好的第一个选项！顺便说一句，这篇文章很棒！谢谢Dan，请查看同一网站上的其他文章，它们帮助我学习了很多fp，旨在优雅地处理与此完全相同的情况。感兴趣的读者可能会发现另一个有用的资源是。