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


当前回答

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

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

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

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

其他回答

我找到了另一种方法来实现这个(这是一个功能组件):

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

希望能有所帮助!

导入图像的最佳方式是…

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

第一步:从“。/img/icon.png”导入MyIcon

第二步:

<img
    src={MyIcon}
    style={{width:'100%', height:'100%'}}
/>    
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}/>
   );
  }
}

导出默认镜像

我通常喜欢把图片放在官方文档中推荐的公共文件夹中。

1. Put your image into public folder. e.g, public/images/image.png
2. use directly into <img>. E.g, <img src="images/image.png" />

由于它在公共文件夹中,它将直接使用这些图像。不需要导入。