如何从本地目录加载图像,并将其包含在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'}。


当前回答

为了让require方法工作,我必须添加".default",就像这样:

<img src={require('./path/to/image.svg').default} />

其他回答

我也遇到了同样的问题,经过研究,我通过将JSON数据放在JS中的常量中来解决这个问题,这样我就可以导入图像,并且只通知JSON对象中的导入。例子:

import imageImport from './image.png';

export const example = [
  {
    "name": "example",
    "image": imageImport
  }
]

<Image source={example.image}/>

我的回答基本上和Rubzen的非常相似。顺便说一句,我使用图像作为对象值。 有两个版本适合我:

{
"name": "Silver Card",
"logo": require('./golden-card.png'),

or

const goldenCard = require('./golden-card.png');
{ "name": "Silver Card",
"logo": goldenCard,

没有包装,但这也是不同的应用。

我也检查了“导入”解决方案,在少数情况下它是有效的(这并不奇怪,这是应用在React中的App.js模式中),但不是在我上面的情况下。

你需要在{}中包装你的图像源路径

<img src={'path/to/one.jpeg'} />

如果使用webpack,你需要使用require

<img src={require('path/to/one.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" />

由于它在公共文件夹中,它将直接使用这些图像。不需要导入。

我找到了另一种方法来实现这个(这是一个功能组件):

const Image = ({icon}) => {
   const Img = require(`./path_to_your_file/${icon}.svg`).ReactComponent;
   return <Img />
}

希望能有所帮助!