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


当前回答

对于我来说,我想调用和使用来自图像文件夹的数组块中的图像。使用“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>
        );
      })}

其他回答

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

导出默认镜像

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

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

最好的方法是先导入映像,然后再使用它。

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

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

把你的图片放在公共文件夹中,或者在公共文件夹中创建一个子文件夹,把你的图片放在那里。 例如:

你把“complete -爬行。jpg”放在公共文件夹中,然后你可以访问它

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

你把complete -爬行.jpg放在public/static/images,然后你可以访问它

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