create-react-app で環境を作ったReactアプリで画像（jpg）を表示させたい。

前提・実現したいこと

発生している問題・エラーメッセージ

画像が表示されない。

該当のソースコード

【App.js】
import React from 'react';
import Animal from './Animal';
import cat from '../img/cat.jpg';
import sheep from '../img/sheep.jpg';

class App extends React.Component {
    render(){
      render(){
        const animalPhotos = [
          {
            image: {cat}
          },
          {
            image: {sheep}
          }
        ];

        return(
          <div>
              {animalPhotos.map((animalItem)=> {
                        return(
                          <Animal
                          image = {animalItem.image}
                          />
                        )
                      })}
        );
    }
}

export default App;

【Animal.js】
import React from 'react';
class Animal extends React.Component{
    render(){
        return(
            <div>
                <img src={this.props.image}/>
            </div>
        );

    }
}
export default Animal;

試したこと

src配下にimgフォルダを作成し、そこから画像を一つずつimportしています。

補足情報

mapメソッドを使って表示させようとしているのですが、どこか文法が間違っているのでしょうか。
そもそも画像に対してmapメソッドは使えず、他のやり方があるのでしょうか。
よろしくお願いいたします。

8zca

2019/10/08 12:16

なんとなく {cat} のせいだとは思いますが・・ Animalコンポーネントの中身も質問に追記してもらってよいでしょうか？

lisateratail

2019/10/09 02:33

見ていただきありがとうございます。Animalコンポーネント追記しました。

thyda.eiqau

2019/10/09 03:19

const animalPhotos = [ {image: cat}, {image: sheep}, } にしたらどうなりますか？ (cat, sheepを囲う中括弧を1つ減らす) <div> { animalPhotos.map((animalItem, idx) => ( <Animal key={idx} image = {animalItem.image} /> )) } </div> にしたらどうなりますか？ (divの閉じタグを入れる、mapのコールバックで返す要素にはkeyをつける) > src配下にimageフォルダを作成し、 import文ではimgフォルダになっていますが認識は正しいですか？

lisateratail

2019/10/10 01:59

> cat, sheepを囲う中括弧を1つ減らすこちらで解決しました！ > divの閉じタグを入れる、mapのコールバックで返す要素にはkeyをつけるまだこの文法を知らなかったです。サンプルコードありがとうございます。 > import文ではimgフォルダになっていますが認識は正しいですか？「img」という名前でフォルダを作成していました。ここへの書き込みが違っていました。（修正済み）ありがとうございました。