0

react-bootstrapから抜粋

ドキュメントにもある、上記のようなカードを作ろうとしています。
ドキュメントでは:

import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';

function BasicExample() {
  return (
    <Card style={{ width: '18rem' }}>
      <Card.Img variant="top" src="holder.js/100px180" />
      <Card.Body>
        <Card.Title>Card Title</Card.Title>
        <Card.Text>
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </Card.Text>
        <Button variant="primary">Go somewhere</Button>
      </Card.Body>
    </Card>
  );
}

export default BasicExample;

となっており"holder.js/100px180"から画像を取ってきていますが、これをReactプロジェクト内のローカルから取ってこようとすると上手くいきません。Card.Imgタグを

<Card.Img variant='top' src='../images/profile_images/pi01.png'/>

とすると
実行結果

のようになり、pngが表示されず小さい画像アイコンが表示されるようになってしまいます。どなたか解決策をご存じないですか?画像のサイズ的な問題なのでしょうか?それとも何か別に問題があるのでしょうか?

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。