Material UI CardMediaの画像が表示されない

Question

前提・実現したいこと

Material-UIのCardを使用し、画像付きカードを表示したいです。原因不明なため、どなたかご教授お願い致します。

create-react-appで作成したReactアプリのfavicon, index.html等が入っているpublicフォルダ内に作成したimagesフォルダの中の画像を表示したいです。

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

CardMediaの画像が表示されないです。エラーメッセージが表示されているわけではありません。

該当のソースコード

import文などは原因でないと思うので、省略しています。

export const myItems: MyItem[] = [
  {
    id: 0,
    title: "Hello",
    desc: "Hello JavaScript",
    img: "/images/blog.JPG",
  },
];

const Hello = () => {
  return (
    <div className="body">
      <div className="items">
        <div className="container">
          <Grid container justify="center" spacing={4}>
            {myItems.map((value) => {
              return (
                <Grid item xs={12} sm={6} md={4} key={value.id}>
                  <Card className="card">
                    <CardActionArea>
                      <CardMedia
                        component="img"
                        image={value.img}
                        style={{ height: 140, paddingTop: "0" }}
                        title={value.title}
                      />
                      <CardContent>
                        <Typography
                          gutterBottom
                          component="h2"
                        >
                          {value.title}
                        </Typography>
                        <Typography
                          variant="body2"
                          component="p"
                        >
                          {value.desc}
                        </Typography>
                      </CardContent>
                    </CardActionArea>
                  </Card>
                </Grid>
              );
            })}
          </Grid>
        </div>
      </div>
    </div>
  );
};

試したこと

以下の記事を読みました。

• React Material-UIでのCardsで画像が表示されない

• Image on Material UI CardMedia

また、myItemsのimgを /public/images/port.JPG などに変えて試してみましたが、表示されません。

補足情報（FW/ツールのバージョンなど）

myItemsの title, desc はちゃんと表示されています。

Comments

[hoshi-takanori]

npm run start または yarn start してるってことですよね？
http://localhost:3000/images/blog.JPG を直接開いたら表示されますか？

Answer 1

import SomeImg from "該当パス";

export const myItems: MyItem[] = [
  {
    id: 0,
    title: "Hello",
    desc: "Hello JavaScript",
    img: SomeImg,
  },
];

と書いたら表示されました。