如何从本地目录加载图像，并将其包含在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'}。
当前回答
const photo = require(`../../uploads/images/${obj.photo}`).default;
...
<img src={photo} alt="user_photo" />
其他回答
好吧，你们现在都知道这个问题的答案了，但我把这个问题的答案贴出来，大多数人在阅读其他答案后可能会想知道:
问:我怎么导入50或100个文件:)
答:我建议你制作一个api (.json)文件，并在其中放入所有图像的链接并调用api。 这是迄今为止最容易批量导入文件的方法，尽管这将花费一些时间和知识，如果你还不知道。
对于那些想要使用多个图像的人来说，一个一个地导入它们将是一个问题。解决方案是将images文件夹移动到公共文件夹。如果你有一张图片在public/images/logo.jpg，你可以这样显示这个图片:
function Header() {
return (
<div>
<img src="images/logo.jpg" alt="logo"/>
</div>
);
}
是的，不需要在源代码中使用/public/。
进一步阅读:https://daveceddia.com/react-image-tag/。
实际上，我刚刚遇到了同样的问题，如果你把你的图像文件从。/public目录移动到。/src目录，你可以导入或要求，都将呈现。
我还在组件中测试了图像和src属性，它们都可以工作。
在我尝试使用。我得到了一个可用的错误，让我可以很容易地修复。
电脑很好心地给了我一条有用的错误信息。
对于我来说，我想调用和使用来自图像文件夹的数组块中的图像。使用“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>
);
})}
我通常喜欢把图片放在官方文档中推荐的公共文件夹中。
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" />
由于它在公共文件夹中，它将直接使用这些图像。不需要导入。
