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


当前回答

首先用{}包装src

如果使用Webpack; 而不是: <img src={"./logo.jpeg"} /> . quot

你可能需要使用require:

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


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

从'./logo.jpeg'导入logo;//导入

还是……

Const logo = require('./logo.jpeg');//使用require

然后插上电源……

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

好吧,你们现在都知道这个问题的答案了,但我把这个问题的答案贴出来,大多数人在阅读其他答案后可能会想知道:

问:我怎么导入50或100个文件:)

答:我建议你制作一个api (.json)文件,并在其中放入所有图像的链接并调用api。 这是迄今为止最容易批量导入文件的方法,尽管这将花费一些时间和知识,如果你还不知道。

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

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

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