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

Question

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

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

我建议使用此选项,尤其是在重复使用图像源时.

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

Answer 3

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

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

Answer 4

你需要使用 require 和 . 默认

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

Answer 5

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

import imageImport from './image.png';

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

<Image source={example.image}/>

Answer 6

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

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

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

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

Answer 7

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

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

Answer 8

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

第一的

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

Answer 9

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

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

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

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

Answer 10

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

Answer 11

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

1. 你把“compleative-reptile.jpg”放在公共文件夹中，然后你可以访问它

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

2. 你把completative-reptile.jpg在public/static/images，那么你就可以访问它

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

Answer 12

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

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