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

【问题标题】：How do I reference a local image in React?如何在 React 中引用本地图像？
【发布时间】：2017-02-21 07:13:00
【问题描述】：

如何从本地目录加载图像并将其包含在reactjs img src 标签中？

我在我的组件所在的同一文件夹中有一个名为one.jpeg 的图像，我在render 函数中尝试了<img src="one.jpeg" /> 和<img src={"one.jpeg"} />，但图像没有显示。另外，我无法访问webpack config 文件，因为该项目是使用官方create-react-app 命令行工具创建的。

更新：如果我首先使用import img from './one.jpeg' 导入图像并在img src={img} 中使用它，则此方法有效，但我有很多图像文件要导入，因此我想以img src={'image_name.jpeg'} 的形式使用它们。

【问题讨论】：

React won't load local images的可能重复
另见stackoverflow.com/questions/37644265/…
我实际上有一个类似的问题，我的图像被导入到 index.jsx 文件中，我在 webpack 中有加载器，编译面工作正常，因为确实是图像的副本在我的 server/public/js 文件夹中创建了一个随机数，它的正确路径在捆绑器中，但我无法可视化图像。这也很奇怪，它是在 server/public/js 中生成的，而不是在我写入 index.js 时在 server/public/img 中生成的

标签： reactjs

【解决方案1】：

首先将src包装在{}中

如果使用 Webpack；代替： <img src={"./logo.jpeg"} />

你可能需要使用require：

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

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

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

或者...

const logo = require('./logo.jpeg); // with require

然后插入...

<img src={logo} />

我建议您使用此选项，尤其是在您重复使用图像源时。

【讨论】：

注意不要忘记相关网址开头的.。应该是<img src={require('./one.jpeg')} />
这些方法是否会影响图像加载时间等性能？如果是这样，哪一个在性能方面更好？
@انعامالرحمٰن - 这里有一些 cmets stackoverflow.com/questions/31354559/… 但 TL;DR 没有，没有性能差异。
这里遗漏了这样一个事实，即至少在 webpack 4 中，要使用的加载器是 url-loader 而不是文件一个或上一个
使用 <img src={require('./logo.jpeg').default} /> 为我工作

【解决方案2】：

最好的办法是先导入图片再使用。

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

【讨论】：

为什么这是最好的方法？
如果您需要在同一个组件中重用，这是最好的方法，您可以在没有路径引用的情况下使用它。这是一个很好的做法@JasonLeach
Jason Leach 更干净的方式

【解决方案3】：

在 public 文件夹中创建一个 assets 文件夹并相应地放置图像路径。

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

【讨论】：

谢谢，这在文件夹中可能存在或不存在图像的情况下对我很有用，因为它们是根据显示的资源动态导入的。
为什么会这样？无论我将图像文件夹放在哪里，它都不起作用。但现在我把它放在一个名为“assets”的文件夹中，就像你说的那样，它有效吗？

【解决方案4】：

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

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

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

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

【讨论】：

【解决方案5】：

你需要使用 require 和 .默认

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

【讨论】：

这成功了！ .default 的用途是什么？

【解决方案6】：

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

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

【讨论】：

不支持 src/ 之外的相对导入。为此，您必须将图像保存在 src/ 中，不推荐这样做
@toing_toing 为什么不建议将图像保存在 src 中？官方文档中有这种情况的示例：facebook.github.io/create-react-app/docs/…
增加了 webpack 包的大小和编译时间，每次更改资源都需要重新编译并增加加载时间。我宁愿把它放在公共文件夹中并通过url链接。
@toing_toing 你说你会'宁愿......'，但你没有说怎么做。

【解决方案7】：

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

【讨论】：

请，当您回答问题时，请尝试解释您的建议和原因，而不是简单地删除 OP 可能理解或不理解的代码行。您可能还想参考How do I write a good answer?
您好，欢迎来到 SO！虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。请阅读tour和How do I write a good answer?

【解决方案8】：

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

你把“completative-reptile.jpg”放到公用文件夹里，然后你就可以访问了

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

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

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

【讨论】：

当您尝试将项目置于子文件夹下时，这不起作用

【解决方案9】：

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

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

希望对你有帮助！

【讨论】：

【解决方案10】：

你有两种方法可以做到。

首先

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

import React, { Component } from 'react';
import myImg from '../path/myImg.svg';

export default class HelloImage extends Component {
  render() {
    return <img src={myImg} width="100" height="50" /> 
  }
}

第二

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

import React, { Component } from 'react'; 

export default class HelloImage extends Component {
  render() {
    return <img src={require(../path/myImg.svg)} width="100" height="50" /> 
  }
}

【讨论】：

【解决方案11】：

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

第 2 步：

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

【讨论】：

【解决方案12】：

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

import imageImport from './image.png';

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

<Image source={example.image}/>

【讨论】：

【解决方案13】：

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

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

或

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

没有包装器 - 但这也是不同的应用程序。

我也检查了“导入”解决方案，在少数情况下它可以工作（这并不奇怪，这在 React 的 App.js 模式中应用），但不是我上面的情况。

【讨论】：

【解决方案14】：

正如 cmets 中提到的，您可以将图像放在公共文件夹中。 Create-React-App 的文档中也对此进行了说明：https://create-react-app.dev/docs/using-the-public-folder/

【讨论】：

实际上不需要比文档<img src={process.env.PUBLIC_URL + '/img/logo.png'} />中的一行更多的代码

【解决方案15】：

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

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

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

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

【讨论】：

【解决方案16】：

首先你必须导入图片

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

然后插入...

<img src={logo} />

就是这样。

【讨论】：

【解决方案17】：

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

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

【讨论】：

【解决方案18】：

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

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

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

【讨论】：

【解决方案19】：

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

导出默认图片

【讨论】：

【解决方案20】：

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

【讨论】：

【解决方案21】：

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

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>

【讨论】：

【解决方案22】：

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

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

【讨论】：