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


当前回答

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

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

希望能有所帮助!

其他回答

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

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

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

对于我来说,我想调用和使用来自图像文件夹的数组块中的图像。使用“require”方法,并像这样连接“default”,为我解决了这个问题。

在我的slide-data.js页面中:

export const sliderData = [
      {
        image:  require('../../../assets/your-image.jpg').default,
        
        desc: "simple description",
      },

然后,你可以在另一页使用e.g.,这样写

import { sliderData } from "../../slider-data";

{sliderData.map((slide, index) => {
        return (
          <div className="" key={index}>
             <img src={slide.image} alt="slide" className="image overlay " />
          </div>
        );
      })}

有两种方法。

第一个

在类的顶部导入图像,然后在<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 React from "react";   
import image from './img/one.jpg';

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

导出默认镜像

你需要使用require和。默认的

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