は、画像ファイルが存在するかどうかを確認していない

Question

私が使用した開発でが反応あれば、別のデフォルトのファイルをロードするには、私はこの問題が発生しました。これは、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は12345がbookidある「http://myserver/img/12345.jpg」の形で、すなわち、bookidから移入されます。

実際の状況はファイル12345.jpgが存在しますが、54321.jpgは存在しません。

画像を<img>タグに表示する前に、54321.jpgをdefault.jpgに置き換える必要があります。私はこれがファイルのmanupilationに関連する質問だと思う。

以下のメソッドは、coverフィールドが設定されていないと仮定していますが、これは私のコードでは当てはまりません。

それでも、ありがとうございます。

Answer 1

条件演算子を使用して、カバープロパティが存在するかどうかを確認します。

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

それとも

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

それとも、ヌルを取り除くために、関数型プログラミングのmonadic良さを使用します。二つの異なる方法が

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

Answer 2

、このようなものを使用しますチェック。

Answer 3

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

ここでは通常の||演算子を使用できます。これは正常に動作します。しかし、順序を確認してください。 pic1 || pic2では、pic1が最初にチェックされます。定義されていない場合は、pic2に移動します。