如何从本地目录加载图像，并将其包含在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'}。
当前回答
有两种方法。
第一个
在类的顶部导入图像，然后在<img/>元素中引用它，如下所示
import React， {Component} import myImg from '../path/myImg.svg'; 导出默认类HelloImage扩展组件 呈现(){ return <img src={myImg} width="100" height="50" /> . return <img src={myImg} width="100 ｝ ｝
第二个
你可以直接在<img/>元素中使用require('../pathToImh/img')来指定图像路径
import React， {Component} 导出默认类HelloImage扩展组件 呈现(){ return <img src={require(../path/myImg.svg)} width="100" height="50" /> . return <img src={require(../path/myImg.svg) ｝ ｝
其他回答
对于我来说，我想调用和使用来自图像文件夹的数组块中的图像。使用“require”方法，并像这样连接“default”，为我解决了这个问题。
在我的slide-data.js页面中:
export const sliderData = [
{
image: require('../../../assets/your-image.jpg').default,
desc: "simple description",
},
然后，你可以在另一页使用e.g.，这样写
import { sliderData } from "../../slider-data";
{sliderData.map((slide, index) => {
return (
<div className="" key={index}>
<img src={slide.image} alt="slide" className="image overlay " />
</div>
);
})}
import React from "react";
import image from './img/one.jpg';
class Image extends React.Component{
render(){
return(
<img className='profile-image' alt='icon' src={image}/>
);
}
}
导出默认镜像
在公共文件夹内创建一个资产文件夹，并相应地放置图像路径。
<img className="img-fluid"
src={`${process.env.PUBLIC_URL}/assets/images/uc-white.png`}
alt="logo"/>
我的回答基本上和Rubzen的非常相似。顺便说一句，我使用图像作为对象值。 有两个版本适合我:
{
"name": "Silver Card",
"logo": require('./golden-card.png'),
or
const goldenCard = require('./golden-card.png');
{ "name": "Silver Card",
"logo": goldenCard,
没有包装，但这也是不同的应用。
我也检查了“导入”解决方案，在少数情况下它是有效的(这并不奇怪，这是应用在React中的App.js模式中)，但不是在我上面的情况下。
正如一些人在评论中提到的，你可以把图片放在公共文件夹中。这在Create-React-App: https://create-react-app.dev/docs/using-the-public-folder/的文档中也有解释
