React 学习笔记 | 图片引入方式

React 学习笔记

（create-react-app）

由于在学习过程中，使用 React-Bootstrap 的 Card 组件时图片无法显示，因此总结了一些图片引入方式：

1. import

import imgUrl from '../../assets/images/tree.jpg';
<Card.Img src={ imgUrl } />
// 实际在html中的img标签的地址是这样的 src=" /static/media/tree.0474f9edabb35d9b81ba.jpg"

2. require（利用webpack）

<Card.Img src={require('../../assets/images/tree.jpg')}
// 实际在html中的img标签的地址是这样的 src="/static/media/tree.0474f9edabb35d9b81ba.jpg"

3. 直接访问 public 下的文件

<Card.Img src='/assets/images/tree.jpg' />
// 实际在html中的img标签的地址是这样的 "/assets/images/tree.jpg"