如何从本地目录加载图像并将其包含在reactjs img src标记中?
reactjs img src
我有一个名为图像one.jpeg相同的文件夹我的组件里面,我都尝试<img src="one.jpeg" />和<img src={"one.jpeg"} />我的内部render功能,但图像显示不出来。另外,webpack config由于该项目是使用官方create-react-app命令行util 创建的,因此我无权访问文件。
one.jpeg
<img src="one.jpeg" />
<img src={"one.jpeg"} />
render
webpack config
create-react-app
更新:如果我首先导入图像import img from './one.jpeg'并在内部使用它img src={img},则此方法有效,但是我要导入的图像文件太多,因此,我想以形式使用它们img src={'image_name.jpeg'}。
import img from './one.jpeg'
img src={img}
img src={'image_name.jpeg'}
首先将src包装在 {}
{}
然后,如果使用Webpack;代替: <img src={"./logo.jpeg"} />
<img src={"./logo.jpeg"} />
您可能需要使用require:
<img src={require('./logo.jpeg')} />
另一个选择是先导入图像,如下所示:
import logo from './logo.jpeg'; // with import
要么 …
const logo = require('./logo.jpeg); // with require
然后插入…
<img src={logo} />
我建议您使用此选项,尤其是在您重新使用图像源的情况下。