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

我有一个图像称为one.jpeg在相同的文件夹内作为我的组件,我尝试了<img src="one.jpeg" />和<img src={"one.jpeg"} />在我的renderfunction,但图像不显示。此外,我无法访问webpack配置文件,因为该项目是用官方的create-react-app命令行util创建的。

更新:如果我首先导入图像与导入img从'./one.jpeg'和使用它在img src={img},但我有这么多的图像文件导入,因此,我想使用他们的形式,img src={'image_name.jpeg'}。


当前回答

有两种方法。

第一个

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

其他回答

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

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

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

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

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

为了让require方法工作,我必须添加".default",就像这样:

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

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