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

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

我有一个名为图像one.jpeg相同的文件夹我的组件里面，我都尝试<img src="one.jpeg" />和<img src={"one.jpeg"} />我的内部render功能，但图像显示不出来。另外，webpack config由于该项目是使用官方create-react-app命令行util 创建的，因此我无权访问文件。

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

首先将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} />

我建议您使用此选项，尤其是在您重新使用图像源的情况下。

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

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 src={'path/to/one.jpeg'} />

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

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

内部公共文件夹中创建的资产文件夹，将映像路径相应。

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

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

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

我的回答基本上与鲁宾的回答非常相似。我使用图像作为对象值，顺便说一句。有两个版本适用于我：

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

要么

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

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

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

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

第一

将图像导入类的顶部，然后<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" /> 
  }
} 

第二

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

import React, { Component } from 'react'; 

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

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

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

我已经使用过这种方式，并且可以正常工作...希望对您有用。

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

导出默认图像

正如评论中提到的那样，您可以将图像放在公用文件夹中。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 />
}

希望能帮助到你！