如何从本地目录加载图像，并将其包含在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'}。
当前回答
我通常喜欢把图片放在官方文档中推荐的公共文件夹中。
1. Put your image into public folder. e.g, public/images/image.png
2. use directly into <img>. E.g, <img src="images/image.png" />
由于它在公共文件夹中，它将直接使用这些图像。不需要导入。
其他回答
我想导入多个图像并将它们传递给不同的组件。结果证明，我只需要一次导入多个图像，并且可以通过传递道具在任何组件中使用它们。
import whiskey from './img/whiskey.jpg';
import hazel from './img/hazel.jpg';
import tubby from './img/tubby.jpg';
让我们创建一个对象。
dog = [
{ name: "Whiskey", src: whiskey },
// ...
]
然后显示图像
<img src={dog.src}></img>
为了让require方法工作，我必须添加".default"，就像这样:
<img src={require('./path/to/image.svg').default} />
对于那些想要使用多个图像的人来说，一个一个地导入它们将是一个问题。解决方案是将images文件夹移动到公共文件夹。如果你有一张图片在public/images/logo.jpg，你可以这样显示这个图片:
function Header() {
return (
<div>
<img src="images/logo.jpg" alt="logo"/>
</div>
);
}
是的，不需要在源代码中使用/public/。
进一步阅读:https://daveceddia.com/react-image-tag/。
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}/>
);
}
}
导出默认镜像
首先用{}包装src
如果使用Webpack; 而不是: <img src={"./logo.jpeg"} /> . quot
你可能需要使用require:
<img src={\ require(' logo.jpeg')} />
另一种选择是首先导入图像:
从'./logo.jpeg'导入logo;//导入
还是……
Const logo = require('./logo.jpeg');//使用require
然后插上电源……
<img src={logo} />
我推荐这个选项，特别是在重用映像源的情况下。
