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

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

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

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

首先用{}包装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} />

我推荐这个选项，特别是在重用映像源的情况下。

最好的方法是先导入映像，然后再使用它。

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>
    );
  }
} 

import image from './img/one.jpg';

class Icons extends React.Component{
    render(){
      return(
        <img className='profile-image' alt='icon' src={image}/>
    );
    }
}
export default Icons;

导入图像的最佳方式是…

import React, { Component } from 'react';

// image import
import CartIcon from '../images/CartIcon.png';

 class App extends Component {
  render() {
    return (
     <div>
         //Call image in source like this
          <img src={CartIcon}/>
     </div>
    );
  }
}

我用过这种方法，它很有效……希望你有用。

const logofooter = require('../../project-files/images/logo.png');

 return(
 <div className="blockquote text-center">
            <img src={logofooter} width="100" height="80" />
 <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}/>
   );
  }
}

导出默认镜像

我的回答基本上和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 className="img-fluid" 
     src={`${process.env.PUBLIC_URL}/assets/images/uc-white.png`} 
     alt="logo"/>

正如一些人在评论中提到的，你可以把图片放在公共文件夹中。这在Create-React-App: https://create-react-app.dev/docs/using-the-public-folder/的文档中也有解释

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

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

希望能有所帮助!

有两种方法。

第一个

在类的顶部导入图像，然后在<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) ｝ ｝

第一步:从“。/img/icon.png”导入MyIcon

第二步:

<img
    src={MyIcon}
    style={{width:'100%', height:'100%'}}
/>    

const photo = require(`../../uploads/images/${obj.photo}`).default;
...
<img src={photo} alt="user_photo" />

把你的图片放在公共文件夹中，或者在公共文件夹中创建一个子文件夹，把你的图片放在那里。 例如:

你把“complete -爬行。jpg”放在公共文件夹中，然后你可以访问它

src={'/completative-reptile.jpg'}

你把complete -爬行.jpg放在public/static/images，然后你可以访问它

src={'/static/images/completative-reptile.jpg'}

对于那些想要使用多个图像的人来说，一个一个地导入它们将是一个问题。解决方案是将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 logo from './logo.jpeg'; // with import

然后插上电源……

<img src={logo} />

就是这样。

你可以创建一个名为实例images.js的文件，并引用其中所有的应用资源，然后将该组件导入到其他需要显示图像的组件中

你需要使用require和。默认的

 <img src={require('./logo.jpeg').default} />

我想导入多个图像并将它们传递给不同的组件。结果证明，我只需要一次导入多个图像，并且可以通过传递道具在任何组件中使用它们。

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} />

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

import imageImport from './image.png';

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

<Image source={example.image}/>

好吧，你们现在都知道这个问题的答案了，但我把这个问题的答案贴出来，大多数人在阅读其他答案后可能会想知道:

问:我怎么导入50或100个文件:)

答:我建议你制作一个api (.json)文件，并在其中放入所有图像的链接并调用api。 这是迄今为止最容易批量导入文件的方法，尽管这将花费一些时间和知识，如果你还不知道。

实际上，我刚刚遇到了同样的问题，如果你把你的图像文件从。/public目录移动到。/src目录，你可以导入或要求，都将呈现。

我还在组件中测试了图像和src属性，它们都可以工作。

在我尝试使用。我得到了一个可用的错误，让我可以很容易地修复。

电脑很好心地给了我一条有用的错误信息。

如果你不想把你的图片放在公共文件夹中，请使用下面的语法

 src={require("../../assets/images/img_envelope.svg").default}

对于我来说，我想调用和使用来自图像文件夹的数组块中的图像。使用“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" />

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