如何从本地目录加载图像，并将其包含在reactjs img src标签中?
我有一个图像称为one.jpeg在相同的文件夹内作为我的组件，我尝试了<img src="one.jpeg" />和<img src={"one.jpeg"} />在我的renderfunction，但图像不显示。此外，我无法访问webpack配置文件，因为该项目是用官方的create-react-app命令行util创建的。
更新:如果我首先导入图像与导入img从'./one.jpeg'和使用它在img src={img}，但我有这么多的图像文件导入，因此，我想使用他们的形式，img src={'image_name.jpeg'}。
当前回答
如果你不想把你的图片放在公共文件夹中，请使用下面的语法
src={require("../../assets/images/img_envelope.svg").default}
其他回答
const photo = require(`../../uploads/images/${obj.photo}`).default;
...
<img src={photo} alt="user_photo" />
我用过这种方法，它很有效……希望你有用。
const logofooter = require('../../project-files/images/logo.png');
return(
<div className="blockquote text-center">
<img src={logofooter} width="100" height="80" />
<div/>
);
最好的方法是先导入映像，然后再使用它。
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>
);
}
}
如果你不想把你的图片放在公共文件夹中，请使用下面的语法
src={require("../../assets/images/img_envelope.svg").default}
把你的图片放在公共文件夹中，或者在公共文件夹中创建一个子文件夹，把你的图片放在那里。 例如:
你把“complete -爬行。jpg”放在公共文件夹中，然后你可以访问它
src={'/completative-reptile.jpg'}
你把complete -爬行.jpg放在public/static/images，然后你可以访问它
src={'/static/images/completative-reptile.jpg'}
