要檢查的圖像文件存在並加載另一個默認的文件，如果沒有

在我與發展中國家反應過來，就遇到這樣的問題：要檢查的圖像文件存在並加載另一個默認的文件，如果沒有

我檢索相關信息的遠程API某些數據來描述一本書：http://api.rsywx.com/book/randomBook/1。這將返回一個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"}]}

出於這種回報的，我填充state對象，以顯示書在一頁。

有一件事是我需要顯示與該書相關的書籍封面。我沒有涵蓋所有存儲在API中（因此隨機返回）的圖書。

如果封面圖像是有的，可以大膽經由顯示圖像：

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

cover從bookid填充。

但是，如果不是，我必須顯示一個default.jpg作爲後備。

所以基本上我需要檢查this.state.cover文件是否存在。

任何輸入將不勝感激。

更新

感謝所有的在下面的輸入。

我認爲這可能是我沒有讓自己清楚。

無論圖像文件是否在我的服務器上存在，this.state.cover將從bookid填充，即，在「http://myserver/img/12345.jpg」，其中12345是bookid形式。

真實情況是該文件12345.jpg存在，但54321.jpg不是。

因此，在我的<img>標籤中顯示圖像之前，我必須將54321.jpg更換爲default.jpg。我認爲這是一個與文件操作有關的問題。

下面的方法假設cover字段沒有設置，這是不是我的代碼中的情況。

不過，謝謝大家。

來源

2017-03-21 TaylorR

使用條件運算符來檢查覆蓋屬性是否存在。使用這樣的事情，

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

來源

2017-03-21 08:12:42 nrgwsth

兩種不同的方式：

let {cover = "fallback.jpg"} = this.state;

或者

src={this.state.cover || "fallback.jpg"}

或者你使用monadic善良函數式編程的擺脫空的檢查。

來源

2017-03-21 08:24:02 hazardous

非常好的第一選擇！和偉大的文章的方式！ –

謝謝丹，查看同一網站上的其他文章，他們幫助我學了很多東西來學習fp，它的目的在於處理與這個優雅風格完全一致的情況。另一個感興趣的讀者可能會發現有用的是[this]（https://github.com/MostlyAdequate/mostly-adequate-guide）。 – hazardous

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

您可以在這裏使用通常的||運算符。這將工作正常。但要確定訂購。在pic1 || pic2中首先檢查pic1。如果它是未定義的，它將用於pic2。

來源

2017-03-21 08:45:51 Arvind

要檢查的圖像文件存在並加載另一個默認的文件，如果沒有

回答

相關問題