如何从本地目录加载图像并将其包含在reactjs img src标签中？
我one.jpeg在与我的组件相同的文件夹中调用了一个图像，我在我的函数中尝试了两者<img src="one.jpeg" />，但图像没有显示。此外，我无权访问文件，因为该项目是使用官方命令行 util创建的。<img src={"one.jpeg"} />renderwebpack configcreate-react-app
更新：如果我首先导入图像import img from './one.jpeg'并img src={img}在img src={'image_name.jpeg'}.
首先将 src 包装在 {}
那么如果使用 Webpack；代替：
<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} />
我会推荐这个选项，特别是如果你要重复使用图像源。
最好的方法是先导入图片，然后再使用。
import React, { Component } from 'react';
import logo from '../logo.svg';
export default class Header extends Component {
render() {
return (
<div className="row">
<div className="logo">
<img src={logo} width="100" height="50" />
</div>
</div>
);
}
}
在公共文件夹内创建一个资产文件夹并相应地放置图像路径。
<img className="img-fluid"
src={`${process.env.PUBLIC_URL}/assets/images/uc-white.png`}
alt="logo"/>
您需要将图像源路径包装在 {}
<img src={'path/to/one.jpeg'} />
require如果使用，则需要使用webpack
<img src={require('path/to/one.jpeg')} />
你需要使用 require 和 。默认
<img src={require('./logo.jpeg').default} />