如何在 React 中引用本地图像？

首先将 src 包装在 {}

那么如果使用Webpack；而不是：<img src={"./logo.jpeg"} />

您可能需要使用要求：

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

另一种选择是首先导入图像：

import logo from './logo.jpeg'; // with import

或者 ...

const logo = require('./logo.jpeg); // with 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>
    );
  }
} 

---

在公用文件夹中创建一个资产文件夹并相应地放置图像路径。

<img className="img-fluid" 
     src={`${process.env.PUBLIC_URL}/assets/images/uc-white.png`} 
     alt="logo"/>

---

你需要使用 require 和 .默认

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

---

您需要将图像源路径包装在 {} 中

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

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

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

---

导入图像的最佳方式是...

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 photo = require(`../../uploads/images/${obj.photo}`).default;
...
<img src={photo} alt="user_photo" />

---

将您的图像放在公用文件夹中或在您的公用文件夹中创建一个子文件夹并将您的图像放在那里。例如：

您将“completative-reptile.jpg”放在公用文件夹中，然后您可以访问它

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

你把 completative-reptile.jpg 放在 public/static/images，然后你可以访问它

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

---

我遇到了同样的问题，经过研究，我设法通过将 JSON 数据放入 JS 中的常量来解决它，这样我就能够导入图像并且只通知 JSON 对象中的导入。例子：

import imageImport from './image.png';

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

<Image source={example.image}/>

---

对于想要使用多张图像的人来说，一张一张地导入它们当然是个问题。解决方案是将图像文件夹移动到公用文件夹。因此，如果您在 public/images/logo.jpg 中有一张图片，您可以这样显示该图片：

function Header() {
  return (
    <div>
      <img src="images/logo.jpg" alt="logo"/>
    </div>
  );
}

是的，不需要在源代码中使用 /public/。

进一步阅读：https://daveceddia.com/react-image-tag/。

---

你有两种方法可以做到这一点。

第一的

导入类顶部的图像，然后像这样在 <img/> 元素中引用它

从'react'导入反应，{组件}；从'../path/myImg.svg'导入myImg；导出默认类 HelloImage 扩展组件 { render() { return } }

第二

您可以像这样在 <img/> 元素中使用 require('../pathToImh/img') 直接指定图像路径

从'react'导入反应，{组件}；导出默认类 HelloImage 扩展组件 { render() { return } }

---

我找到了另一种实现方式（这是一个功能组件）：

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

希望能帮助到你！

---

第 1 步：import MyIcon from './img/icon.png'

第2步 ：

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

---

首先，您必须导入图像

import logo from './logo.jpeg'; // with import

然后插上...

<img src={logo} />

而已。

---

为了使 require 方法起作用，我必须添加“.default”，如下所示：

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

---

我的回答与 Rubzen 的回答基本相似。顺便说一句，我使用图像作为对象值。两个版本对我有用：

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

或者

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/

---

实际上，我只是遇到了同样的问题，如果您将图像文件从 ./public 目录移动到 ./src 目录，您可以导入或要求，并且两者都将呈现。

https://i.stack.imgur.com/BWmp7.png

https://i.stack.imgur.com/j0Kls.png

https://i.stack.imgur.com/ToyP1.png

https://i.stack.imgur.com/bLqG4.png

我还测试了组件中的 image 和 src 属性，它们都有效。

在我尝试使用 ../ 指示 jpg 所在的确切文件夹后，我收到了一个可用的错误，让我可以轻松修复。

https://i.stack.imgur.com/xaor3.png

https://i.stack.imgur.com/7Rodl.png

---

如果您不想将图像放在公用文件夹中，请使用以下语法

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

---

我用过这种方式，而且效果很好……希望对你有用。

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

导出默认图片

---

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

---

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

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>

---

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

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

---

好吧，你们都知道现在提出的问题的答案，但是我将这个答案发布给你们大多数人在阅读其他答案后可能想知道的问题：

问题：我到底要如何导入 50 或 100 个文件:)

答：我建议您制作一个 api (.json) 文件，并在其中放置所有图像的链接并调用 api。这是迄今为止非常轻松地批量导入文件的最佳方式，尽管这需要一些时间和知识，如果您还不知道的话。

---