ドキュメントにもある、上記のようなカードを作ろうとしています。
ドキュメントでは:
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が表示されず小さい画像アイコンが表示されるようになってしまいます。どなたか解決策をご存じないですか?画像のサイズ的な問題なのでしょうか?それとも何か別に問題があるのでしょうか?